2016-11-25 7 views
1

は私が持っているチェックボックスに配列をバインドし、次の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" ] 
} 

を」 "moduleIdList" HTMLの "moduleIdList"の "1"が "true"の場合、問題は "moduleIdList"をチェックボックスにバインドする方法で、 "1" in "m oduleIdList "チェックボックスがオンになっていてチェックを外すと、" 1 "が配列から削除されます

私の問題を理解できたら幸いです。

挨拶、 サイモン

+0

は、それはそうし私にはデフォルトの 'ng-model'を使うだけでは不可能です。おそらく、それを行う方法はあなたの 'moduleIdList'配列を変更することです – xAqweRx

+0

ええ、知っています、それはng-modelとは関係ないので、残念ながら私はmoduelIdListを変更することができないので、 array – TZimon

+0

あなたのモデルの 'moduleIdList'のバージョンを変換して修正する' Controller'関数を実装するのが簡単です。それで全部です。普通の 'for-loop' – xAqweRx

答えて

0

[OK]を、私は私のために大丈夫です回避策を、得ました。 私は代わりに私がNG-checkedが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>