Question

我有一个指令：

<button ng-click="update()">Update channels for {{id}}</button><br/>  
<li ng-repeat="(k,v) in entries">
    {{k}} is {{v}}
    <input type="text" ng-model="v"></input>
</li>


controller: ($scope, $resource) ->
    Query = $resource('/dmx/getdefs/:id')

    Query.get {id: $scope.id}, (res) ->
       $scope.entries = res
       return

它从服务器检索数据并显示它们。这里没问题。我编辑了一个值。但是，当我点击更新时，我可以在我的处理程序中看到$ scope.entries没有改变。

为什么？

我能解决这个问题： - 而不是服务器返回一个字典{'red'：200，'blue'：100}，而不是返回一个数组 [{'key'：'red'，'val'：200}，{'key'：blue，'val'：100}]。

如果我将指令更改为：

<li ng-repeat="item in entries">
   {{item.key}} has {{item.val}}
    <input type="text" ng-model="item.val"></input>
</li>

它工作正常。但是有没有阵列的方法？似乎Angular能够使用ng-repeat显示字典，但无法双向进行数据绑定。

Answer 1

阵列方式似乎是正确的方法。见here。

如果您坚持迭代原始对象，可以将HTML更改为：

    <li ng-repeat="(k,v) in entries">
        {{k}} is {{v}}
       <input type="text" ng-model="$parent.entries[k]"></input>
   </li>

使用

$parent，因为ng-repeat为重复元素的每个实例创建子范围。

Answer 2

每个重复的元素都有它自己的范围所以你需要做这样的事情来引用条目对象：

<input type="text" ng-model="entries[k]"></input>

ng-repeat显示模型但不更新它

2 个答案: