AngularJs數組綁定到一個複選框

我有以下JS和HTML：AngularJs數組綁定到一個複選框

$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" ] 
}

的「在模塊1：「複選框中，」moduleIdList「中的」1「等於」true「，但問題在於，我不知道如何將」moduleIdList「綁定到複選框，以便在出現」1「在「m oduleIdList「複選框被選中，當有人取消選中時，」1「將從陣列中刪除

希望您能理解我的問題，我很樂意爲您提供幫助！

問候，西蒙

來源

2016-11-25 TZimon

似乎對我來說，那只是使用默認的'ng-model' - >這是不可能的。可能的辦法是改變你的'moduleIdList'數組 – xAqweRx

是的，我知道，它不符合ng-model，所以我正在尋找解決方法，因爲不幸的是我無法更改moduelIdList array – TZimon

簡單的解決方法是在你的'Controller'函數中執行，它將從你的模型轉換並更正'moduleIdList'版本。就這樣。普通的'for-loop' – xAqweRx

好吧，我得到了一個解決辦法，這是爲我好。我只是不使用NG-模型，而不是我用NG-NG檢查點擊，這樣我就可以使用的功能，這將做什麼我想：

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

來源

2016-12-02 07:33:26 TZimon

AngularJs數組綁定到一個複選框

回答

相關問題