Question

这是一个困扰我的问题。我需要以某种方式使用Angular从Json对象生成选择标记的选项。代码看起来像这样：

<select id="cargo" ng-model="cargo.values.cargoList">
    <option ng-repeat="(class, name, weight) in cargo.values.cargolist
            ng-click="orderList()"> 
</select>

班级cargo.js看起来有点像：

function setCargo(){
    this.cargo = {
        values: {
            forkliftNeeded: false,
            cargoList: {
                class: "class",
                name: "name",
                weight: "weight"
            }
    }
};

this.setData = function(input); {
    this.cargo.value.cargoList = input.cargo.cargoList;
    this.cargo.value.forkliftNeeded = input.cargo.forkliftNeeded;
}:

实际的Json对象：

[{"cargo":{"forkliftNeeded":true,"cargoList":[{"class":"A","name":"Book","weight":"1"}]}}]

根据货物清单中的物品数量生成适当数量的选项标签的想法。每个选项都需要按顺序显示，还需要显示每个项目的类，名称和权重（对于记录，我将forkliftNeeded项目委托给一个复选框）。

为了使事情变得更加复杂，我还想做到这一点，以便点击给定选项将所述选项移动到列表顶部。不仅仅是选项，它必须实际改变Json对象的顺序。

正如你可以想象的那样，我自己并没有足够的技巧来完成这项工作。您将给予我任何帮助将不胜感激。

编辑：

我设法取得了一些进展。结果证明你可以使用：

<select id="cargo">
    <option ng-repeat="item in cargo.values.cargolist"
            ng-click="orderList()">
        {{ item.class + " " + item.name + " " + item.weight }}
    </option>
</select>

现在我需要知道的是如何执行orderList（）函数。有没有办法在点击时获得订单标记的索引？

Answer 1

您正在寻找的是ngOptions。将该参数添加到<select>代码中会自动根据您的数组填写<options>。

<select id="cargo" 
    ng-model="cargo.values.cargoList" 
    ng-options="option.class + ' ' + option.name + ' ' + option.weight as option.name for option in cargo.values.cargoList">
</select>

更多关于ngOptions此处：

https://docs.angularjs.org/api/ng/directive/ngOptions

使用Json和Angular生成选择选项

1 个答案: