如何动态设置 ng-model 以对应对象属性

Question

在某个 json 文件中，数组中只会存在一个对象。但是，此对象具有未知数量的属性。

[{"red": 14, "green": 12, "orange": 1, "yellow": 11, "blue": 9}]

这个对象被称为“项目”。这是我的表格：

<div ng-app="myApp" ng-controller="MainCtrl">
<form class="idea item">
    <div ng-repeat="(key, value) in items[0]" >
        <label>{{key}}</label>
        <input type="range" value="{{value}}" min="0" max="15"/>
    </div>
    <input type="submit" ng-click="save()" />
</form>
</div>

但是，当我在表单上点击提交时，发送的数据始终是最初在输入中设置的数据：[{"red": 14, "green": 12, "orange": 1, "yellow": 11, "blue": 9}]

例如，如果我将所有输入设置为 0，我如何让它发送[{"red": 0, "green": 0, "orange": 0, "yellow": 0, "blue": 0}]？

save() 函数主要包括：

$http.put(url, $scope.items);

Answer 1

就像 javascript 中的变量键一样，在 ng-model 中使用 bracket notation 作为 member operator

<input type="range" ng-model="items[0][key]" min="0" max="15"/>

演示：Fiddle