首页 文章

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

提问于
浏览 次
9

我正在渲染键：使用ng-repeat的值对象数组，如下所示：

<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迭代（键，值）之后，它成为单向绑定 .

Fiddle: http://jsfiddle.net/BSbqU/1/

我怎样才能使它成双向绑定？或者我应该以不同的方式处理此问题然后嵌套ng-repeat？

angularjs model-binding angularjs-ng-repeat

3 回答

  • 6
    <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'}
        ];
}
    回复于
  • 6

    此选项适用于对象：

    <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>

    不是很棒，但它确实有效 .

    回复于
  • 0

    在抓到我的头骨后，我找到了更新对象键名称的方法 . 它有点扭曲但它对我有用 .

    更换

    <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]; }
        }
    };
}
    回复于

相关问题