如何动态更新NG-模型NG重复？ [英] How to update ng-model dynamically in ng-repeat?

问题描述

我现在面临一些问题，动态NG-模型值在我的角度页面。下面是我的示例JSON。

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"}
        ]
    }
]

我想要做从这个josn是，在我的网页创建一个视图，这样，它将包含 TAB1 和 TAB2 作为页面的标题和各自的值为复选框。用户将有选择性来选择自己的选项。在提交我想要得到他选择的选项。我想知道像值1，值3（弗罗姆TAB1），值1，值（从TAB2）选择，在我的控制器。我怎样才能做到这一点？结果
这里是我的样本方法。

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

推荐答案

您应该修改您code一点点，你应该在对象和绑定复选框，该模型添加checked属性。

You should modify you code a little bit you should add a checked property in the object and bind checkbox to that model .

请可以使用下面的想法或code得到你想要的东西更紧密地

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-模型NG重复？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！