如何對對象數組使用 ng-repeat 並將其綁定到 angularjs 中的復選框

Question

我正在嘗試在卡片中顯示一個復選框。 因此，只要選中復選框，該值就會綁定。 它工作正常。 但我需要為許多卡執行此操作。 我需要知道實現它的更好方法，而不是重復相同的代碼。 我看到了許多與此相關的解決方案，但沒有用。

Controller代碼

$scope.carBrand = {
    "carbrands" : {
        "BMW" : [ 
            {
                "d320" : $scope.bmwPermission.d320,
                "note" : "Users who likes d320 ",
                "configurable" : true
            }, 
            {
                "d520" : $scope.bmwPermission.d520,
                "note" : "Users who likes d520",
                "configurable" : true
            }, 
            {
                "d720" :$scope.bmwPermission.d720,
                "note" : "Users who likes d720",
                "configurable" : true
            }
        ],
        "AUDI" : [ 
            {
                "A1" :  $scope.audiPermission.A1,
                "note" : "Users who likes A1",
                "configurable" : true
            }, 
            {
                "A2" : $scope.audiPermission.A2,
                "note" : "Users who likes A2",
                "configurable" : true
            }, 
            {
                "A3" : $scope.audiPermission.A3,
                "note" : "Users who likes A3",
                "configurable" : true
            }
        ]
    }
}

$scope.bmwDependencyCheck = function(newObj) {
    if( $scope.bmwPermission.d320){
        $scope.bmwPermission.d520 = true
        $scope.bmwPermission.d720 = true            
    }else if ($scope.bmwPermission.d520){
        $scope.bmwPermission.d720 = true
    }
 }


...

HTML 代碼

<pre>

<div class="card inline  col-md-3">
  <div class="card-heading">
    <div class="content-block lead inline col-md-12" >
      <label class="col-md-8 text-align-left"> BMW </label>
     </div>
    </div>                                                                                                                                      
    <div class="card-body">
       <ul class="flexview lbl-content">
         <li class="lable col-md-10">
          <label class="checkbox-inline" for="bmw-d320">
            <input type="checkbox" name="chpview" id="bmw-d320"
                   ng-model="bmwPermission.d320"         
                   ng-change="bmwDependencyCheck(bmwPermission.d320)" />d320
           </label>
         </li>
       </ul>
       <ul class="flexview lbl-content">
        <li class="lable col-md-10">
          <label class="checkbox-inline" for="bmw-d520">
           <input type="checkbox" name="chpview" id="bmw-d520"
                  ng-model="bmwPermission.d520"                                                                 
                  ng-change="bmwDependencyCheck(bmwPermission.d520)" />d520                                                           
           </label>
        </li>
       </ul>
     .
     .
     .

  </div>            
</div>  
</pre>

Answer 1

我不確定你的意思是不是這個工作 model。 正如@Santhosh_mp 所說，您需要使用兩個 ng-repeat。

請注意，值綁定將在唯一鍵上...

在您的情況下，您需要為每一行創建一個 model 密鑰並檢查它是否存在，因此所有循環上的密鑰引用都是相同的

 {
            "d320" : $scope.bmwPermission.d320,
             "model": "d320"
            "note" : "Users who likes d320 ",
            "configurable" : true
        }, 
<input ng-if="row.model === 'd320'" type="checkbox" ng-model="row.d320">

此方法需要多個帶有 ng-if 的復選框......並且不能動態工作。例如添加 d321 將需要再次編碼。

所以我改為將鍵改為值而不是 d320

我不確定，為什么第二個 ng-repeat 的 ng-model 沒有綁定綁定...所以我做了一個單獨的 function 並在初始化和每次 model 更改時調用它

<div ng-controller="CarsController">
  <ul class="flexview lbl-content">
         <li class="lable col-md-10">
          <label class="checkbox-inline" for="bmw-d320">
            <input type="checkbox" name="chpview" id="bmw-d320"
                   ng-model="bmwPermission.d320"         
                   ng-change="bmwDependencyCheck(bmwPermission.d320)" />d320
           </label>
         </li>
       </ul>
       <ul class="flexview lbl-content">
        <li class="lable col-md-10">
          <label class="checkbox-inline" for="bmw-d520">
           <input type="checkbox" name="chpview" id="bmw-d520"
                  ng-model="bmwPermission.d520"                                                                 
                  ng-change="bmwDependencyCheck(bmwPermission.d520)" />d520                                                           
           </label>
        </li>
       </ul>

       <ul>
           <li ng-repeat="(key, values) in carBrand.carbrands">{{key}}
           <ul>
             <li ng-repeat="row in values">
               <input type="checkbox" ng-model="row.value">
               &nbsp;&nbsp;{{row.note}}
               &nbsp;&nbsp;{{row.configurable}}
             </li>
           </ul>
           </li>
       </ul>
</div>

JS

var app  = angular.module('stackoverflow', []);
app.controller('CarsController', function($scope, $timeout){
$scope.bmwPermission={};
$scope.audiPermission={};
$scope.bmwPermission.d320 = false;
$scope.bmwPermission.d520 = false;
$scope.bmwPermission.d720 = false;
$scope.audiPermission.A1 = false;
$scope.audiPermission.A2 = false;
$scope.audiPermission.A3 = false;

$scope.defineCars = function(){
$scope.carBrand = {
    "carbrands" : {
        "BMW" : [ 
            {
                "value" : $scope.bmwPermission.d320,
                "note" : "Users who likes d320 ",
                "configurable" : true
            }, 
            {
                "value" : $scope.bmwPermission.d520,
                  "note" : "Users who likes d520",
                "configurable" : true
            }, 
            {
                "value" :$scope.bmwPermission.d720,
                "note" : "Users who likes d720",
                "configurable" : true
            }
        ],
        "AUDI" : [ 
            {
                "value" :  $scope.audiPermission.A1,
                "note" : "Users who likes A1",
                "configurable" : true
            }, 
            {
                "value" : $scope.audiPermission.A2,
                "note" : "Users who likes A2",
                "configurable" : true
            }, 
            {
                "value" : $scope.audiPermission.A3,
                "note" : "Users who likes A3",
                "configurable" : true
            }
        ]
    }
}
}

$scope.bmwDependencyCheck = function(newObj) {

 if( $scope.bmwPermission.d320){
        $scope.bmwPermission.d520 = true
        $scope.bmwPermission.d720 = true            
    }else if ($scope.bmwPermission.d520){
        $scope.bmwPermission.d720 = true
    }


$scope.defineCars();    
 }
$scope.defineCars(); 
});

工作的jsfiddle在這里