AngularJs 将一个数组绑定到一个复选框答案

【问题标题】：AngularJs bind an Array to an checkboxAngularJs 将一个数组绑定到一个复选框
【发布时间】：2017-04-09 23:51:33
【问题描述】：

我有以下 JS 和 HTML：

$scope.loadInstallation = function (installationid) {
    $scope.currentInstallation = {};
    $scope.currentInstallation = $scope.installationList[installationid];;
    $scope.currentInstallationID = installationid;
};

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList1">Module 1:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList1" ng-model="currentInstallation.moduleIdList" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList2">Module 2:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList2" ng-model="currentInstallation.moduleIdList" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList3">Module 3:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList3" ng-model="currentInstallation.moduleIdList" /></label>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList4">Module 4:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList4" ng-model="currentInstallation.moduleIdList" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList5">Module 5:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList5" ng-model="currentInstallation.moduleIdList" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList6">Module 6:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList6" ng-model="currentInstallation.moduleIdList" /></label>
            </div>
        </div>
    </div>
</div>

还有一个 JSON，看起来像这样：

currentInstallation =
{
  "id":"1",
  "moduleIdList": [ "1", "2" ]
}

“moduleIdList”中的“1”等于HTML“Module 1:”复选框中的“true”，问题是，我不知道如何将“moduleIdList”绑定到Checkboxes，这样当“moduleIdList”中有一个“1”，复选框被选中，当有人取消选中它时，“1”将从数组中删除

希望您能理解我的问题，我很高兴为您提供帮助！

您好，西蒙

【问题讨论】：

在我看来，仅仅使用默认的ng-model -> 这是不可能的。可能，这样做的方法是更改您的 moduleIdList 数组
是的，我知道它不适用于 ng-model，所以我正在寻找解决方法，因为不幸的是我无法更改 moduelIdList 数组
简单的解决方法是在您的Controller 函数中实现，该函数将从您的模型转换为moduleIdList 的正确版本并转换为正确版本。就这样。普通for-loop
我会试试这个，谢谢:)

标签： javascript html angularjs arrays checkbox

【解决方案1】：

好的，我有一个解决方法，这对我来说很好。我只是不使用 ng-model，而是使用 ng-checked ng-click，所以我可以使用函数，这正是我想要的：

$scope.loadInstallation = function (installationid) {
    $scope.currentInstallation = {};
    $scope.currentInstallation = $scope.installationList[installationid];;
    $scope.currentInstallationID = installationid;
};

$scope.isModuleSelected = function (id) {
    if ($scope.currentInstallation.moduleIdList != null && $scope.currentInstallation.moduleIdList.indexOf(id) != -1)
        return true;
    else
        return false;
};

$scope.toggleModule = function (id) {
    if ($scope.currentInstallation.moduleIdList == null)
           $scope.currentInstallation.moduleIdList = [];
    var numberOnIndex = $scope.currentInstallation.moduleIdList.indexOf(id);
    if (numberOnIndex == -1)
        $scope.currentInstallation.moduleIdList.push(id);
    else 
        $scope.currentInstallation.moduleIdList.splice(numberOnIndex, 1);
};

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList1">Module 1:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList1" ng-checked="isModuleSelected('1')" ng-click="toggleModule('1')" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList2">Module 2:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList2" ng-checked="isModuleSelected('2')" ng-click="toggleModule('2')" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList3">Module 3:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList3" ng-checked="isModuleSelected('3')" ng-click="toggleModule('3')" /></label>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList4">Module 4:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList4" ng-checked="isModuleSelected('4')" ng-click="toggleModule('4')" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList5">Module 5:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList5" ng-checked="isModuleSelected('5')" ng-click="toggleModule('5')" /></label>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="installationmoduleIdList6">Module 6:</label>
            <div class="form-control">
                <label><input type="checkbox" id="installationmoduleIdList6" ng-checked="isModuleSelected('6')" ng-click="toggleModule('6')" /></label>
            </div>
        </div>
    </div>
</div>

【讨论】：