AngularJS:使用键值的ng-repeat - 更新对象

18 浏览
0 Comments

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?

0
0 Comments

在使用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指令时更新对象键名的问题。

0
0 Comments

这个问题的出现原因是在使用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)的更新。

通过这种方式,我们可以实现对象的键值对的双向绑定,既可以更新键的值,也可以更新值的值。这样就解决了原始代码中只能更新值而无法更新键的问题。

0
0 Comments

问题的出现原因是在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'}
    ];
}

这样修改后,输入框的值就可以更新模型中的值了。

0