javascript - 使用键/值的 Angular JS 顺序选择

标签 javascript angularjs

我只是问了关于从键/值映射而不是数组生成选择:AngularJS select box generated from object

现在一切正常: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 ...

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

但唯一缺少的是如何订购所选商品。

如何在从 angularjs 中的键/值映射生成的选择框中排序选择项?

最佳答案

解决方案 1:您可以使用另一个数组来存储字段的顺序。为此,您需要使用 ng-repeat 代替 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;
    };
});

关于javascript - 使用键/值的 Angular JS 顺序选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18654259/

相关文章:

javascript - 将详细信息按钮添加到动态 HTML 列表

javascript - elFinder 打开不同的文件夹

javascript - 使用 JQuery 将 HTML 表单操作从 'HTTPS' 更改为 'HTTP'

javascript - 为什么行点击事件在 Angular 上不能正常工作?

javascript - Chart.js maxBarThickness 选项不起作用

javascript - jQuery 切换在 Bootstrap 容器包装内展开 div

javascript - 使用 Angular 过滤器计算日期差异

javascript - 为什么输入字段没有设置边框?

angularjs - Angular Controller构造函数:什么时候被调用?

javascript - 为什么过滤器在 Angular 输入字段中不起作用?