使用选择输入排序表

Sort table with select input

本文关键字：排序 输入 选择      更新时间：2023-09-26

我有以下结构:

$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 }
];

我想按姓名，电话或年龄排序使用select input，像这样:

<select class="sortBy" ng-model="sort" ng-change="order(predicate)">
  <option value="name" ng-click="order('name')" ng-selected="predicate === 'name'">Name</option>
  <option value="phone" na-click="order('phone')" ng-selected="predicate === 'phone'">Phone</option>
  <option value="age" ng-click="order('age')" ng-selected="predicate === 'age'">Age</option>
</select>

这就是我想出来的。命令功能:

$scope.order = function(predicate) {
  alert(predicate);
  $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
  scope.predicate = predicate;
};

但是它创建了另一个选项，空的。当我改变选择时，值设置不正确。我该怎么做呢?

我建议您将排序ng-model直接应用于orderBy过滤器，不需要为创建排序函数创建自定义函数&呼叫ng-click

另一个建议是将选择选项转换为ng-options，这将是更合适的方式。

标记 

<select class="sortBy" ng-options="prop for prop in props" ng-model="sort"></select>
<table class="friend">
  <tr>
    <th>Name</th>
    <th>Phone Number</th>
    <th>Age</th>
  </tr>
  <tr ng-repeat="friend in friends | orderBy:sort">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
  </tr>
</table>
控制器

$scope.props = ["name","phone","age"]
工作Plunkr

相关文章：