复选框与模型进行多选,如果没有Ng模型,则无法编译

时间:2017-09-12 09:06:53

标签: javascript angularjs

我有一个ng-repeat输出复选框,它位于另一个创建七个选项卡的ng-repeat中,所有选项卡都包含相同的复选框。我有两个问题。首先,我发现当我选中一个方框时,它会在所有其他选项卡中选择相同的方框,一旦选中它就不会再次取消选中。

我尝试删除模型,但代码无法编译,我也尝试使用checklist-modelchecklist-value代替ng-model,但这也没有编译。

复选框的HTML是:

<div class="time-check" ng-repeat="service in settings.services">
    <input type="checkbox" value="" ng-change="settings.showChecked($index)" ng-model="settings.rules[$index].checked" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-{{service.TimeValidation}}" name="check-{{day.Day}}-{{level.LevelTmsCode}}"/>
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-{{service.TimeValidation}}" class="time-check-input"></label> <span>{{service.TimeValidation}}</span>
</div>

生成整个手风琴,标签和方框的JS是:

settings.getDeliveryServices = function() {
    $http.get(resourceBase + "api/service/levels").success(function(data) {
        settings.serviceLevels = data;
        // Get Service Days
        $http.get(resourceBase + "api/service/days").success(function(days) {
            settings.serviceDays = days;
            // Build the Accordion
            setTimeout(() => settings.triggerClick(settings.serviceLevels), 500);
            $http.get(resourceBase + "api/service/services").success(function (services) {
                settings.services = services;
                // Build a collection of all possible rules
                for (var a = 0; a < settings.serviceLevels.length; a++) {

    settings.rulesTmsCode.push(settings.serviceLevels[a].LevelTmsCode + "-");
                }
                for (var b = 0; b < settings.serviceDays.length; b++) {
                    settings.rulesDay.push(settings.serviceDays[b].Day + "-");
                }
                for (var c = 0; c < settings.services.length; c++) {
                    settings.rulesTime.push(settings.services[c].TimeValidation);
                }
                var allArrays = [settings.rulesTmsCode, settings.rulesDay, settings.rulesTime];
                function allPossibleCases(arr) {
                    if (arr.length === 1) {
                        return arr[0];
                    } else {
                        var result = [];
                        var allCasesOfRest = allPossibleCases(arr.slice(1)); 
                        for (var i = 0; i < allCasesOfRest.length; i++) {
                            for (var j = 0; j < arr[0].length; j++) {
                                result.push(arr[0][j] + allCasesOfRest[i]);
                            }
                        }
                        return result;
                    }
                }
                var uncheckedRules = allPossibleCases(allArrays);
                for (var i = 0; i < uncheckedRules.length; i++) {
                    settings.rules.push({
                        id: uncheckedRules[i],
                        checked: false
                    });
                }
            });
        });
    });
}

我的终端只是加载这些复选框,每个标签的集合彼此分开,当我检查它们时,我想得到一个已经检查过的列表。

1 个答案:

答案 0 :(得分:0)

好的,如果我为ng-model创建一个虚拟对象,那么它只检查一个复选框。

<div class="time-check" ng-repeat="service in settings.services">
    <input type="checkbox" value="" ng-change="settings.showChecked($index)" ng-model="newObject[item.name]" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-{{service.TimeValidation}}" name="check-{{day.Day}}-{{level.LevelTmsCode}}"/>
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-{{service.TimeValidation}}" class="time-check-input"></label> <span>{{service.TimeValidation}}</span>
</div>