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与controlsAs混合？只需使用一个。在html中，您可以将ng-click更改为

vm.addContributor()

在控制器中

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

}

别忘了控制器中的var vm = this;

Answer 2

这是解决问题的代码：

controller.js

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

电子表格在表格顶部添加行礼物

2 个答案: