假设我有以下用户:
$scope.users = {
"2": {
email: 'john@gmail.com',name: 'John'
},"3": {
email: 'elisa@gmail.com',name: 'Elisa'
}
}
我想创建一个< select>具有以下选项:
<option value="3">Elisa</option> <option value="2">John</option>
换句话说,用户应该按名称排序。
我尝试以下使用(key,value) in expression语法,但它不工作:
<option ng-repeat="(user_id,user) in users | orderBy:'user.name'"
value="{{ user.id }}">
{{ user.name }}
</option>
Live example here.
我缺少什么?
请不要使用ng-options建议解决方案,因为我使用ui-select2这是与ng选项不兼容。
虽然你会在线程中看到这个作者的回答引用了一个链接,我认为最好在SO上面提到一个提到的解决方法:
这是真的,这在技术上没有实现,但有一个简单的工作,如果你愿意稍微改变你的数据模型:使用自定义过滤器生成对象的属性(无替换)的数组。如果你添加键字段到对象(在上面的情况下为“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>
这里是plunkr。
注意,orderBy过滤器将name作为其参数,而不是user.name。
不幸的是,将id属性添加到您的对象会创建与其在包含对象中的键不匹配的可能性。
在你的答案中提到的链接中,还提出了在用户对象中即时创建id属性的解决方案,但我觉得这种方法有点不太麻烦(以引入数据复制为代价)。