Question

尝试从输入框输入排序条件并动态订购内容。代码工作正常，但是当我尝试更改时：

orderBy:'age'

带

orderBy:'{{criteria}}'

它不起作用。这是代码：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="testApp" ng-controller="testController">
<p>Enter ordering criteria in the input box:</p>
<p><input type="text" ng-model="criteria"></p>
<p>{{criteria}}</p>
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:'age'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
<script>
var app = angular.module('testApp',[]);
app.controller('testController', ['$scope', function($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:10},
       {name:'Mary', phone:'555-9876', age:19},
       {name:'Mike', phone:'555-4321', age:21},
       {name:'Adam', phone:'555-5678', age:35},
       {name:'Julie', phone:'555-8765', age:29}];
}]);
</script>
</body>
</html>

Answer 1

{{}}仅用于非角度表达式中的插值。由于ng-repeat是针对scope执行的，因此您可以直接引用该变量。

orderBy:criteria

Answer 2

我假设您想要使用文本框过滤列表，并按每个对象的age属性对结果进行排序？如果您希望这样做，您只需链接过滤器。

<tr ng-repeat="friend in friends | orderBy:'age' | filter : criteria">
  <td>{{friend.name}}</td>
  <td>{{friend.phone}}</td>
  <td>{{friend.age}}</td>
</tr>

这是一个使用多个过滤器的例子 http://plnkr.co/edit/8rfitXitGhjjthUXujOL?p=info

在AngularJS中动态使用orderBy过滤器

2 个答案: