角JS为了使用选择键/值 [英] Angular JS order select using key/value

问题描述

我刚刚问了一下从键/值映射，而不是阵列产生一个选择：<一href=\"http://stackoverflow.com/questions/18653307/angularjs-select-box-generated-from-object\">AngularJS选择对象生成框

I just asked about generating a select from key/value map instead of array: AngularJS select box generated from object

这是现在所有工作的罚款： http://jsfiddle.net/UPWKe/1/

That is all working fine now: http://jsfiddle.net/UPWKe/1/

<select ng-model="current.addressCode" ng-options="value.code as value.name for (key, value) in student.address | orderBy: 'code'"</select>

......和js ...

... and js ...

$scope.student = {
    address: {
        select: {
            code: "0",
            name: "Select proof of address"
        },
        letter: {
            code: "1",
            name: "Letter"
        },
        photograph: {
            code: "3",
            name: "Photograph"
        }
    },

但唯一缺少的，就是如何订购选择项目。

But the only thing missing, is how to order the select items.

如何能在angularjs从键/值映射产生一个选择框顺序选择项目？

How can I order select items in a select box generated from key/value map in angularjs?

推荐答案

解决方案1 ​​：您可以使用另一个阵列存储字段的顺序。为此，您需要代替 NG-选项使用 NG-重复：

Solution 1: You can use another array to store the order of the fields. For this you would need to use ng-repeat in place of ng-options:

$scope.studentAddressFields = [
    "select",
    "letter",
    "photograph"
]

HTML

<select ng-model="current.addressCode">
    <option ng-repeat="field in studentAddressFields" 
    value="student.address[field]['code']">
        {{student.address[field]['name']}}
    </option>
</select>

解决方案2 ：使用过滤器：

HTML

<select ng-model="current.addressCode" ng-options="code as details.name 
for (code, details) in student.address | getOrdered">
</select>

过滤器：

myApp.filter('getOrdered', function() {
    return function(input) {
        var ordered = {};
        for (var key in input){            
            ordered[input[key]["code"]] = input[key];
        }           
        return ordered;
    };
});

这篇关于角JS为了使用选择键/值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！