電子表格添加行呈現在表頂部

Question

我有一個angularjs應用程序，並使用電子表格來查看/添加/編輯表中的行。當我選擇添加時，我希望新列出現在列表頂部而不是列表底部。一旦添加該行，它應根據我設計的排序順序進行排序。但爲了可用性，如果新行在頁面的頂部，則對用戶更友好。任何想法，建議等非常感謝。

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> 

控制器：

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

如果你想在第一個新項目顯示。您可以嘗試使用拼接

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

爲什麼您將$ scope與controllerAs混合？只用一個。在HTML中你改變NG-點擊

vm.addContributor() 

並在控制器

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

} 

不要忘記在控制器

Answer 2

var vm = this;這是解決該問題的代碼：

控制器.js

vm.contribut ors.splice（0，0，$ scope.inserted = {name：''，role：''}）;