如何在 ng 重复中动态更新 ng 模型？

Question

在我的角度页面中，我面临着动态ng模型值的一些问题。这是我的示例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中做的是，在我的页面中创建一个视图，这样，它将包含< code>tab1和< code>tab2作为页面标题，以及相应的< code>value作为< code>checkbox。用户将有选择他的选项的选择性。在提交时，我想得到他选择的选项。我想知道在我的控制器中选择了< code>value1，value 3(from tab 1)，< code>value1，value2(from tab2)这样的内容。我该怎么做？< br >这是我的方法示例。

<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)"

请帮助我，< br >谢谢

Answer 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);
                    });

                });
            };
        });