AngularJS：带有键值的 ng-repeat - 更新对象答案

【问题标题】：AngularJS: ng-repeat with key value - updating objectAngularJS：带有键值的 ng-repeat - 更新对象
【发布时间】：2013-05-05 22:25:28
【问题描述】：

我正在使用 ng-repeat 渲染 key:value 对象数组，如下所示：

<div ng-controller="mainCtrl">    
  <div ng-repeat="record in records">
    <div ng-repeat="(key, value) in record">
        <input ng-model="key" />: <input ng-model="value" />
    </div>
  </div>
</div>

JS：

var mainCtrl = function($scope){
$scope.records = [
        {'key1':'val1'},
        {'key2':'val2'}
        ];
}

问题是无法通过输入标签更新键和值。由于某种原因，它在使 ng-repeat 迭代 (key,value) 后成为一种方式绑定。

小提琴： http://jsfiddle.net/BSbqU/1/

如何使它成为双向绑定？还是我应该以与嵌套 ng-repeat 不同的方式解决这个问题？

【问题讨论】：

标签： angularjs model-binding angularjs-ng-repeat

【解决方案1】：

<div ng-controller="mainCtrl">    
<div ng-repeat="record in records">

        <input ng-model="record.name" />: <input ng-model="record.value" />
    </div>
</div>

还有 JS：

var myApp = angular.module('myApp', []);

var mainCtrl = function($scope){
$scope.records = [
{'name':'key1','value':'val1'},
{'name':'key2', 'value':'val2'}
        ];
}

【讨论】：

这使得输入字段可编辑，但更改后的值不会更新模型。所以绑定仍然是一种方式。小提琴：jsfiddle.net/BSbqU/2
Gotcha，与使用 key 作为 ng-model 有关，尽管我能够通过分配名称和值并删除内部重复来使其工作，坚持下去，让 jsfiddle 工作。
非常有趣的是，您如何在没有内部重复的情况下做到这一点，但是您给出的小提琴没有更新..
更新了答案，jsfiddle今天早上不和我合作了。
好的，这涉及到模型结构的变化。我可以做，但并不完全热衷于做。 +1。

【解决方案2】：

此选项适用于对象：

<div ng-controller="mainCtrl">    
  <div ng-repeat="record in records">
    <div ng-repeat="(key, value) in record">
        <input ng-model="key" />: <input ng-model="record[key]" />
    </div>
  </div>
</div>

不是很出色，但很有效。

【讨论】：

它只为价值而工作，但这是否也会更新密钥？

【解决方案3】：

在摸不着头脑之后，我找到了一种更新对象键名的方法。它有点扭曲，但对我有用。

替换

<input ng-model="key" />

与

<input type="text" ng-model="key" ng-change="update_key(record,key,$index)" line-key/>

您将需要 'lineKey' 指令来专注于您的输入

var app = angular.module('myApp',[]);
var focus_key=-1;
app.directive('lineKey', function () {
    return function (scope, element, attrs) {
        if(focus_key==scope[attrs.ngModel]){
            focus_key=-1;
            element[0].focus();
        }
    };
});

最后，将 'update_key' 方法添加到您的控制器中

app.controller('mainCtrl',['$scope'],function($scope){
        $scope.records = [
        {'key1':'val1'},
        {'key2':'val2'}
    ];
    $scope.update_key=function(obj,new_key,id){
        var keys    = Object.keys(obj);
        var values  = Object.values(obj);
        var old_key = keys[id];
        if(keys.indexOf(new_key)==-1&&new_key.length>0){
            // clear ...
            for(var i=0,key;key=keys[i];i++){   delete obj[key];    }
            keys[id]=new_key;//... change key value ...
            focus_key=new_key;//... notify to keep focus on modifyed input ...
            // ... and refill to preserve the position in the object list
            for(var i=0,key;key=keys[i];i++){   obj[key]=values[i]; }
        }
    };
}

【讨论】：