如何对对象数组使用 ng-repeat 并将其绑定到 angularjs 中的复选框

Question

I am trying to display a checkbox inside Cards. So whenever the checkbox is checked the value is going to bind. It is working fine. But I need to do this for many cards. Instead of repeating the same code, I need to know the better way to achieve it. I saw many of the solutions related to this but no use.

Controller code

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

<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

I am not sure whether you meant this working model. As said @Santhosh_mp you need to use two ng-repeat.

Note, the value binding will be on unique keys...

in your case you need to create a model key for each and every row and check whether it exists, so the key reference is same on all loop

 {
            "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">

This method requires multiple checkboxes with ng-if.....and cannot work dynamic.. Say for example adding d321 will need to be coded again.

So instead i changed the key to value instead of d320

I am not sure, why the ng-model for the second ng-repeat did not bind bind... So i made a seperate function and called it at initialize and on every model change

<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(); 
});

The working jsfiddle is here