AngularJS:使用键值的ng-repeat - 更新对象
AngularJS:使用键值的ng-repeat - 更新对象
我正在使用ng-repeat渲染key:value对象数组,代码如下:
:
JS:
var mainCtrl = function($scope){ $scope.records = [ {'key1':'val1'}, {'key2':'val2'} ]; }
问题是键和值无法通过输入标签进行更新。由于ng-repeat在迭代(key,value)后变为单向绑定,出现了某种原因。
示例: http://jsfiddle.net/BSbqU/1/
如何使其成为双向绑定?还是我应该以不同的方式解决这个问题,而不是嵌套ng-repeat?
在使用AngularJS的ng-repeat指令时,我遇到了一个更新对象键名的问题。经过一番思考,我找到了一种解决方法。具体操作如下:
首先,将代码中的
替换为
这样做是为了使用自定义指令`lineKey`来保持输入框的焦点。
然后,添加如下的`lineKey`指令到AngularJS应用的模块中:
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){ // 清空... for(var i=0,key;key=keys[i];i++){ delete obj[key]; } keys[id]=new_key;//... 更改键名 ... focus_key=new_key;//... 通知保持焦点在修改后的输入框 ... // ... 并重新填充以保持对象列表中的位置 for(var i=0,key;key=keys[i];i++){ obj[key]=values[i]; } } }; });
通过以上操作,我成功解决了使用ng-repeat指令时更新对象键名的问题。
这个问题的出现原因是在使用AngularJS的ng-repeat指令与对象配合时,更新对象的键(key)值(value)存在一些问题。在上述代码中,ng-repeat的嵌套循环中,通过ng-model指令绑定了键和值的输入框。
然而,尽管这种方法可以更新对象的值,但无法更新对象的键。也就是说,键(key)的绑定(ng-model="key")只是一个单向绑定,无法实现双向绑定,从而无法更新键的值。
要解决这个问题,我们可以使用另一种方法。可以通过使用AngularJS的内置$index变量来获取键(key)的值,并将其作为对象的属性。具体代码如下:
<div ng-controller="mainCtrl"> <div ng-repeat="record in records"> <div ng-repeat="(key, value) in record"> <input ng-model="record[$index]" />: <input ng-model="value" /> </div> </div> </div>
在这个修改后的代码中,我们使用了ng-model指令绑定了键(key)和值(value)的输入框。键(key)的绑定使用了$index变量,该变量表示当前循环的索引,从而实现了键(key)的更新。
通过这种方式,我们可以实现对象的键值对的双向绑定,既可以更新键的值,也可以更新值的值。这样就解决了原始代码中只能更新值而无法更新键的问题。
问题的出现原因是在ng-repeat中使用了对象的键作为ng-model,导致无法更新模型中的值。解决方法是将ng-model的值设置为对象的属性,而不是对象的键。
下面是解决该问题的步骤:
1. 将ng-model的值从"record.name"和"record.value"更改为"record.name"和"record.value"。
2. 移除内部的ng-repeat。
3. 将ng-model绑定到对象的属性,而不是对象的键。
代码如下:
:
var myApp = angular.module('myApp', []); var mainCtrl = function($scope){ $scope.records = [ {'name':'key1','value':'val1'}, {'name':'key2', 'value':'val2'} ]; }
这样修改后,输入框的值就可以更新模型中的值了。