AngularJS:带有键值的 ng-repeat - 更新对象 [英] AngularJS: ng-repeat with key value - updating object

查看:24
本文介绍了AngularJS:带有键值的 ng-repeat - 更新对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

<div ng-repeat="记录在记录中"><div ng-repeat="(key, value) in record"><input ng-model="key"/>: <input ng-model="value"/>

JS:

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

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

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

我怎样才能使它成为双向绑定?或者我应该以与嵌套 ng-repeat 不同的方式来解决这个问题?

解决方案

<div ng-repeat="记录在记录中"><input ng-model="record.name"/>: <input ng-model="record.value"/>

还有 JS:

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

I am rendering key:value object array with ng-repeat like this:

<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'}
        ];
}

Problem is that keys and values cannot be updated through input tags. For some reason it becomes one way binding after making ng-repeat iterate over (key,value).

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

How can I make it a two way binding? Or should I approach this problem in a different way then nested ng-repeat?

解决方案

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

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

And the JS:

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

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

这篇关于AngularJS:带有键值的 ng-repeat - 更新对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆