如何在 ng-repeat 中动态更新 ng-model?
Posted
技术标签:
【中文标题】如何在 ng-repeat 中动态更新 ng-model?【英文标题】:How to update ng-model dynamically in ng-repeat? 【发布时间】:2013-07-10 23:07:29 【问题描述】:我的角度页面中的动态 ng-model 值存在一些问题。这是我的示例 JSON。
mytabs = [
name : "tab1",
values : [
value:"value1",
value:"value2",
value:"value3",
value:"value4"
]
,
name : "tab2",
values : [
value:"value1",
value:"value2",
value:"value3",
value:"value4"
]
]
我想从这个 josn 中做的是,在我的页面中创建一个视图,这样,它将包含 tab1
和 tab2
作为页面标题,并将相应的 value
作为 checkbox
。用户将具有选择他的选项的选择性。在提交时,我想获得他选择的选项。我想知道在我的控制器中选择了value1,value3 (frome tab1)
、value1,value2(from tab2)
之类的东西。我该怎么做?
这是我的示例方法。
<div ng-repeat="tab in mytabs">
<h1>tab.name</h1>
<div ng-repeat="val in tab.values">
<input type="checkbox" ng-model="val.value"/>
</div>
</div>
<input type="button" value="submit" ng-click="checkValues(val)"
请帮帮我, 谢谢
【问题讨论】:
您的 json 无效。名称:tab1 --> 名称:“tab1” 抱歉,只是输入错误。无论如何,我身边都有有效的 json 【参考方案1】:你应该稍微修改你的代码,你应该在对象中添加一个选中的属性并将复选框绑定到该模型。
请使用下面的想法或代码更接近你想要的东西
<div ng-repeat="tab in mytabs">
<h1>tab.name</h1>
<div ng-repeat="val in tab.values">
<input type="checkbox" ng-model="val.checked"/>
</div>
</div>
<input type="button" ng-click="checkValues()" value="checkitems" />
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope,$filter)
$scope.mytabs = [
name: "tab1",
values: [
value: "value1",checked:false ,
value: "value2", checked: false ,
value: "value3", checked: false ,
value: "value4", checked: false
]
,
name: "tab2",
values: [
value: "value1", checked: false ,
value: "value2", checked: false ,
value: "value3", checked: false ,
value: "value4", checked: false
]
];
$scope.checkValues = function ()
angular.forEach($scope.mytabs, function (value, index)
var selectedItems = $filter('filter')(value.values, checked: true );
angular.forEach(selectedItems, function (value, index)
alert(value.value);
);
);
;
);
【讨论】:
谢谢 Ajay beniwal,这太棒了。非常感谢。你把我从延迟天的循环中救了出来。以上是关于如何在 ng-repeat 中动态更新 ng-model?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用ng-repeat使bxSlider在AngularJS中工作?
AngularJS ng-repeat 用于动态子 json 数组