我有以下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”将从数组中删除
希望你能理解我的问题,我很高兴有任何帮助!
问候, 西蒙
答案 0 :(得分:0)
好的,我有一个解决方法,这对我来说没问题。 我只是不使用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);
};
&#13;
<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>
&#13;