ng repeat中推入数组后的AngularJs OrderBy

ng repeat中推入数组后的AngularJs OrderBy,angularjs,angularjs-ng-repeat,sql-order-by,push,Angularjs,Angularjs Ng Repeat,Sql Order By,Push,我尝试在将新元素推送到数组后对其进行排序,并在ng repeat上显示更改。它没有按预期工作,我的作用域似乎与视图断开连接 我有一个带有ng中继器的人员阵列。然后是按姓氏对数组排序的列标题。最后是一个按钮,用于添加一个新人,并自动按名字对数组排序,并在视图中显示 这是我的HTML代码: () 谢谢 <div ng-app="myApp"> <div ng-controller='myController'> <div> <inpu

我尝试在将新元素推送到数组后对其进行排序,并在ng repeat上显示更改。它没有按预期工作,我的作用域似乎与视图断开连接

我有一个带有ng中继器的人员阵列。然后是按姓氏对数组排序的列标题。最后是一个按钮,用于添加一个新人,并自动按名字对数组排序,并在视图中显示

这是我的HTML代码:

()

谢谢

<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>

首先,必须将
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函数中都执行此操作,以便在每次单击任何图标时更新筛选的属性。单击“按名称订购”时,您做得很好

我更新了你的小提琴

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