AngularJS：如何在编辑模式下冻结 ng-repeat 中的 orderBy答案

【问题标题】：AngularJS: How to freeze orderBy in ng-repeat during edit modeAngularJS：如何在编辑模式下冻结 ng-repeat 中的 orderBy
【发布时间】：2017-02-28 09:50:14
【问题描述】：

我正在使用md-data-table，并且添加了基于列的排序选项。下面，展示了我的 html(pug 格式) 代码：

table(md-table md-row-select multiple='' ng-model='vm.selected' md-progress='promise')
 //- columns
 thead(md-head class='back-color')
   tr(md-row)
     th(md-column ng-click='vm.orderingBy(name)')
       span Name
     th(md-column ng-click='vm.sortingBy(code)')
       span Code
 //- rows
 tbody(md-body)
   tr(md-select='record' md-select-id='id' ng-repeat='record in vm.records | orderBy:vm.orderByColumn)
     //- name
     td(md-cell)
       p(ng-hide='vm.columns.edit') {{record.name}}
       md-input-container(ng-if='vm.columns.edit' class='no-errors-spacer md-no-margin')
         input(ng-model='record.name' md-select-on-focus)
     //- code
     td(md-cell)
       p(ng-hide='vm.columns.edit') {{record.sorting_code}}
       md-input-container(ng-if='vm.columns.edit' class='no-errors-spacer md-no-margin')
         input(ng-model='record.code' md-select-on-focus)

我的 AngularJS(Javascript) 代码如下所示：

vm.orderByColumn = 'name';
vm.orderingBy = function(ordering) {
  vm.orderByColumn = ordering;
}

问题是当表格按“代码”排序时，我正在尝试编辑记录的代码，当您更改代码的值时，记录的顺序会发生变化。所以，结果很混乱。我正在考虑是否有任何方法可以在我处于编辑模式时冻结订单。

【问题讨论】：

@Dimitris 是vm.records 动态变化还是只更新一次？
@Jannu vm.records 更新了一次。
如果是一次更新，可以将ng-repeat='record in vm.records...换成ng-repeat='record in ::vm.records...使用一次绑定

标签： javascript html angularjs angularjs-orderby

【解决方案1】：

将您的orderBy 逻辑外包到您的控制器中，并通过使用类似example fiddle 中的简单开关变量使其在编辑模式下阻塞。我希望这个工作示例将帮助您在应用程序中实现此逻辑。

    var myApp = angular.module('myApp',[]);

    myApp.controller('MyCtrl', function ($scope, orderByFilter) {

        $scope.edit = false;
        $scope.data =  [{
            name: 'Frank'
        },{
            name: 'Peter'
        },{
            name: 'Basti'
        },{
            name: 'Sven'
        },{
            name: 'Franky'
        },{
            name: 'Sveny'
        },{
            name: 'bob'
        }];

        $scope.order = {
            column: '',
            revers: false
        }

        $scope.toggleEditMode = function () {
           $scope.edit = !$scope.edit;
        }

        $scope.orderBy = function (column) {

          if (!$scope.edit) {
            $scope.order.column = column;
            $scope.order.reverse = !$scope.order.reverse; //toggle revers
            $scope.data = orderByFilter($scope.data, $scope.order.column, $scope.order.reverse);
          }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
      <div>
          <h3 ng-click="orderBy('name')">
           Name
          </h3>
          <p ng-repeat="item in data">
            <input type="text" ng-model="item.name" ng-if="edit" />
            <span ng-if="!edit">{{ item.name }}</span>
          </p>
      </div>
      <button ng-click="toggleEditMode()">
          Toggle edit mode
      </button>
    </div>
</div>

【讨论】：

【解决方案2】：

这个问题我有一段时间了，我找到了一个非常简单的解决方案。我自己用$filter做了排序方法，

就我而言：而不是

                                <tr ng-repeat="schedule in schedules | orderBy:filerTable2:filterasc track by $index">

我只是放了

                                <tr ng-repeat="schedule in schedules">

我使用 setFiler 方法对列表进行排序，使用过滤器参数作为过滤器名称。

$scope.setFiler = function(filter){

        if($scope.filerTable2 == filter){
            $scope.filterasc = !$scope.filterasc;
        }
        else{
            $scope.filerTable2 = filter;
            $scope.filterasc = false;
        }

        $scope.schedules = $filter('orderBy')($scope.schedules, filter, $scope.filterasc);
};

【讨论】：