在ng-repeat中推入数组后的AngularJs OrderBy答案

【问题标题】：AngularJs OrderBy after push into an array in ng-repeat在ng-repeat中推入数组后的AngularJs OrderBy
【发布时间】：2017-03-28 20:07:16
【问题描述】：

我正在尝试在向其推送新元素后对数组进行排序，并在我的 ng-repeat 上显示更改。它没有按预期工作，看起来我的范围与视图断开连接。

我有一个带有 ng-repeater 的人员数组。然后是一个列标题，用于按姓氏对数组进行排序。最后是一个按钮，用于添加一个新人并自动按名字对数组进行排序并显示在视图上。

这是我的 HTML 代码：

(I also have a fiddler here)

谢谢！！

<div ng-app="myApp">
  <div ng-controller='myController'>
    <div>
      <input type="button" value="Filter All" ng-click="filterAll()" />
      <input type="button" value="Add & Filter" ng-click="AddNFilter()" />
    </div><br/>
    <div><a href="" ng-click="orderByField='lname'; reverseSort = !reverseSort">Order by LName</a></div>
    <div ng-repeat="p in person | orderBy:orderByField:reverseSort">
      {{p.name}} {{p.lname}}
    </div>
  </div>
</div>

还有我的javascript：

var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $filter) {
    var person = [{
            name: "Seimour"
            , lname: "Duncan"
        }
        , {
            name: "Engy"
            , lname: "Wook"
        }
        , {
            name: "Dame"
            , lname: "Eyola"
      }];
    $scope.person = person;
    $scope.filterAll = function () {
        alert('Before filter: ' + $scope.person[0].name);
        var filtered = $filter('orderBy')($scope.person, 'name');
        $scope.person = filtered;
        alert('After filter: ' + $scope.person[0].name);
    }
    $scope.AddNFilter = function () {
        var p = [{
            name: "Ayesha"
            , lname: "Shexper"
        }];
        alert('Length before adding: ' + $scope.person.length);
        $scope.person.push(p);
        var filtered = $filter('orderBy')($scope.person, 'name');
        $scope.person = filtered;
        alert('Length after adding: ' + $scope.person.length);
    }
});

【问题讨论】：

标签： angularjs angularjs-ng-repeat sql-order-by push

【解决方案1】：

首先，您必须将 p 变量转换为对象，而不是对象数组，以使您的代码正常工作：

var p = {
  name: "Ayesha",
  lname: "Shexper"
};

其次，您不需要再次对范围内的对象进行排序。如果您更改传递给 orderBy 过滤器的变量以按正确的属性过滤就足够了：

$scope.orderByField = 'name';
$scope.reverseSort = !$scope.reverseSort; // Optional! Do it if you want to reverse the sorting

您应该在 filterAll 和 AddNFilter 函数中执行此操作，以在您每次单击任何图标时更新过滤器的属性。点击Order by LName时你做得很好

我更新了你的小提琴here

【讨论】：