E-Formular Zeile hinzufügen präsentiert am Anfang der Tabelle

Question

Ich habe eine angularjs-Anwendung und verwende E-Form zum Anzeigen/Hinzufügen/Bearbeiten von Zeilen in einer Tabelle. Wenn ich addiere, möchte ich, dass die neue Zeile am Anfang der Liste und nicht am Ende der Liste angezeigt wird. Sobald die Zeile hinzugefügt wurde, sollte sie nach der Sortierreihenfolge sortiert werden, die ich entworfen habe. Aber für die Benutzerfreundlichkeit ist es benutzerfreundlicher, wenn sich die neue Zeile oben auf der Seite befindet. Irgendwelche Ideen, Vorschläge usw. werden sehr geschätzt.

HTML:

 <md-button type="button" class="md-accent md-raised" ng-click="searchText=undefined; addContributor()">+ Add Contributor</md-button> 
     </div> 
    </md-card-header-text><label>Search: <input ng-model="searchText"></label><button-xs ng-click="searchText=undefined">Clear</button-xs> 
    </md-card-header> 
    <md-card-content class="px-helper-pt-0"> 
    <md-table-container> 
     <table md-table md-progress="vm.contributors"> 
     <colgroup><col></colgroup> 
     <colgroup><col></colgroup> 
     <colgroup><col></colgroup> 
     <colgroup><col></colgroup> 
     <thead md-head md-order="vm.query.order"> 
     <tr md-row> 
      <th ng-show=false md-column md-order-by="id" class="md-body-2"><span class="md-body-2">Id</span></th> 
      <th md-column md-order-by="name" class="md-body-2"><span class="md-body-2">Name</span></th> 
      <th md-column md-order-by="role" class="md-body-2"><span class="md-body-2">Role</span></th> 
      <th md-column class="md-body-2"><span class="md-body-2">Edit</span></th> 
      <th md-column class="md-body-2"><span class="md-body-2"></span></th> 
     </tr> 
     </thead> 
     <tr dir-paginate="item in vm.contributors | filter:{searchField:searchText} | itemsPerPage: 25 | orderBy: vm.query.order"> 
      <td ng-show=false md-cell><span editable-text="item.id" e-disabled e-name="id" e-form="rowform">{{item.id}}</span></a></td> 
      <td md-cell><span editable-text="item.name" e-name="name" e-form="rowform">{{item.name}}</span></a></td> 
      <td md-cell><span editable-text="item.role" e-name="role" e-form="rowform">{{item.role}}</span></a></td> 
      <td style="white-space: nowrap"> 
      <form editable-form name="rowform" onbeforesave="saveContributor($data, item.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == item"> 
       <md-button type="submit" ng-disabled="rowform.$waiting" class="md-accent md-raised">save</md-button> 
       <md-button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">Cancel</md-button> 
      </form> 
      <div class="buttons" ng-show="!rowform.$visible"> 
       <md-button type="button" class="md-primary md-raised" ng-click="rowform.$show()">edit</md-button> 
       <md-button class="md-warn md-raised" ng-confirm-message="Are you sure you want to delete?" ng-confirm-click="deleteContributor(item.id)">Delete</md-button> 
      </div> 
      </td> 
     </tr> 
     </table> 
    </md-table-container> 

Controller:

activate(); 

function activate() { 
    vm.promises = [getContributors()]; 

    return $q.all(vm.promises).then(function() { 
    logger.info('Activation', 'Contributors Controller', 'Template Rendered'); 
    }); 
} 

vm.query = { 
    order: 'name' 
}; 

$scope.deleteContributor = function(contributorId) { 
    contributorsFactory.deleteContributor(contributorId).then(function(status) { 
    console.log(status); 
    if (status !== 409) { 
     $mdToast.show($mdToast.simple().textContent('Deleted Contributor' + contributorId).theme('success').position('left top')); 
     contributorsFactory.deleteItemFromArrayById(contributorId, vm.contributors); 
    } 
    window.setTimeout(function() {window.location.reload();}, 1000); 
    }); 
}; 

$scope.saveContributor = function(data, id) { 
    contributorsFactory.updateContributor(JSON.stringify(data), id).then(function(res) {console.log(res);}); 
    $mdToast.show($mdToast.simple().textContent('Form Saved').theme('success').position('left top')); 
    window.setTimeout(function() {window.location.reload();}, 1000); 
}; 

$scope.addContributor = function() { 
    $scope.inserted = { 
    value: '' 
    }; 
    vm.contributors.push($scope.inserted); 
}; 

function getContributors() { 
    var item; 
    return dojo.contribCollection() 
    .then(function(data) { 
     vm.contributors = data; 

     angular.forEach(vm.contributors, function(e) { 
     e.searchField = e.id + ' ' + e.name + ' ' + e.role + ' '; 

Answer 1

Wenn Sie in den ersten neuen Artikel anzeigen möchten. Sie können versuchen, spleißen

vm.contributors.splice(0,0,itemyouwanpush) 

Und warum mischen Sie $ Scope mit ControllerAs? Benutze einfach eins. In html ändern Sie ng Sie auf

vm.addContributor() 

Und Controller

vm.addContributor()=function(){ 
     vm.contributors.splice(0,0,itemyouwanpush) 

} 

Und nicht var vm = this; in Controller vergessen

Answer 2

Dies ist der Code, der das Problem behoben:

Controller .js

vm.contribut ors.splice (0, 0, $ scope.inserted = {Name: '', Rolle: ''});