如何在 ng-repeat 中动态更新 ng-model? [英] How to update ng-model dynamically in ng-repeat?
问题描述
我的 angular 页面中的动态 ng-model 值遇到了一些问题.这是我的示例 JSON.
mytabs = [{名称:tab1",值:[{值:值1"},{值:值2"},{值:value3"},{值:值4"}]},{名称:tab2",值:[{值:值1"},{值:值2"},{值:value3"},{值:值4"}]}]
我想从这个 josn 做的是,在我的页面中创建一个视图,它将包含 tab1
和 tab2
作为页面的标题和相应的 value
作为 checkbox
.用户将具有选择他的选项的选择性.提交时,我想获得他选择的选项.我想知道在我的控制器中选择了诸如 value1,value3 (frome tab1)
, value1,value2(from tab2)
之类的东西.我该怎么做?
这是我的示例方法.
<h1>{{tab.name}}</h1><div ng-repeat="val in tab.values"><input type="checkbox" ng-model="val.value"/>
<input type="button" value="submit" ng-click="checkValues(val)"
请帮帮我,
谢谢
您应该稍微修改一下代码,您应该在对象中添加一个选中的属性并将复选框绑定到该模型.
请使用下面的想法或代码来更紧密地获得您想要的东西
<h1>{{tab.name}}</h1><div ng-repeat="val in tab.values"><input type="checkbox" ng-model="val.checked"/>
<input type="button" ng-click="checkValues()" value="checkitems"/><脚本>var app = angular.module('plunker', []);app.controller('MainCtrl', function ($scope,$filter) {$scope.mytabs = [{名称:tab1",值: [{ value: "value1",checked:false },{值:value2",检查:假},{值:value3",检查:假},{ 值:value4",检查:false }]},{名称:tab2",值: [{值:value1",检查:假},{值:value2",检查:假},{值:value3",检查:假},{ 值:value4",检查:false }]}];$scope.checkValues = 函数 () {angular.forEach($scope.mytabs, function (value, index) {var selectedItems = $filter('filter')(value.values, {checked: true });angular.forEach(selectedItems, function (value, index) {警报(值.值);});});};});
I am facing some problem with dynamic ng-model values in my angular page. Here is my sample JSON.
mytabs = [
{
name : "tab1",
values : [
{value:"value1"},
{value:"value2"},
{value:"value3"},
{value:"value4"}
]
},
{
name : "tab2",
values : [
{value:"value1"},
{value:"value2"},
{value:"value3"},
{value:"value4"}
]
}
]
What I want to do from this josn is, creating a view in my page such that, It will contain tab1
and tab2
as headings of page and the respective value
as a checkbox
. The user will have the selectivity to select his option. On submit I want to get the options he selected. I want to know something like value1,value3 (frome tab1)
, value1,value2(from tab2)
are selected, in my controller. How can I do this?
Here is my sample approach.
<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)"
Please help me,
Thank you
You should modify you code a little bit you should add a checked property in the object and bind checkbox to that model .
Kindly could use the below idea or code to get what you want more closely
<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);
});
});
};
});
这篇关于如何在 ng-repeat 中动态更新 ng-model?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!