AngularJs将一个Array绑定到一个复选框

Question

i have the following JS and 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> 

And an JSON, which look something like this:

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

The "1" in the "moduleIdList" equals "true" in the HTML "Module 1:" Checkbox, the Problem is, I don't know, how to bind the "moduleIdList" to the Checkboxes, so that when there's a "1" in "moduleIdList" the Checkbox is checked and when someone uncheck it, the "1" will be deleted out of the Array

Hope you can understand my problem, I'm glad for any help!

Greetings, Simon

Answer 1

Ok, I got an workaround, which is fine for me. I just don't use the ng-model, instead I use ng-checked ng-click, so I can use functions, which will do exactly what I want:

 $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>