如何在AngularJS中对ng-repeat中的对象数据源进行sorting?
假设我有以下用户:
$scope.users = { "2": { email: 'john@gmail.com', name: 'John' }, "3": { email: 'elisa@gmail.com', name: 'Elisa' } }
我想用下面的选项创build一个<select>
:
<option value="3">Elisa</option> <option value="2">John</option>
换句话说,用户应该按名称sorting。
我(key, value) in expression
语法中使用(key, value) in expression
尝试以下,但它不起作用:
<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" value="{{ user.id }}"> {{ user.name }} </option>
现场示例
我错过了什么?
请不要使用ng-options
提供解决scheme,因为我使用与ng-options
不兼容的ui-select2
。
虽然你会看到这个在线程中的作者的答案引用链接,我认为这是很好的提出了一个在SO上提到的解决方法:
确实,这在技术上没有实现,但是如果您愿意稍微更改数据模型,则可以轻松解决:使用自定义filter生成对象属性的数组( 无需replace)。 如果你把关键字段添加到对象(上面的例子中的“id”),你应该能够得到你想要的行为:
app.filter("toArray", function(){ return function(obj) { var result = []; angular.forEach(obj, function(val, key) { result.push(val); }); return result; }; }); ... $scope.users = { 1: {name: "John", email: "john@gmail.com", id: 1}, 2: {name: "Elisa", email: "elisa@gmail.com", id: 2} };
这里是可以使用的ng-repeat指令:
<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>
这里是高级玩家
请注意, orderBy
filter将name
作为其参数,而不是user.name
。
不幸的是,将id
属性添加到对象中的确会造成与包含对象中的关键字不匹配的可能性。
在你的答案中提到的链接中,也提出了一些解决scheme,用于在用户对象上快速创buildid
属性,但是我觉得这种方法不太麻烦(以引入数据复制为代价)。
好的,我find了答案:
它尚未实现:(
添加到接受的答案和看到你的数据格式,你应该改变你的数据为
app.filter('myFilterUsers',function(){ return function(data) { var newRes = []; angular.forEach(data,function(val,key){ val["id"] = key; //Add the ID in the JSON object as you need this as well. newRes.push(val); }); return newRes; } });