Javascript 使用select输入对表进行排序
我的结构如下:Javascript 使用select输入对表进行排序,javascript,angularjs,Javascript,Angularjs,我的结构如下: $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
$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>
但它创建了另一个选项,空。更改选择时的值设置不正确。如何实现这一点?我建议您将sort
ng模型直接应用于orderBy
过滤器,无需创建自定义函数来创建排序函数,并在ng点击
另一个建议是将select选项转换为ng选项
,这将是更合适的方法
标记
<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>
您可以发布您的ng repeat
代码吗?不能在
上使用单击事件,不支持跨浏览器。同时使用ng model
和ng selected
也没有意义。。。只需对ordering使用ng model
变量,但是,如果我想创建另一个带有asc/desc order的过滤器,该怎么办?
<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"]