AngularJs將一個Array綁定到一個復選框

Question

我有以下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”綁定到Checkbox，這樣當有“ 1“in”moduleIdList“選中復選框，當有人取消選中它時，”1“將從數組中刪除

希望你能理解我的問題，我很高興為你提供幫助！

問候，西蒙

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