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

Question

我正在尝试在卡片中显示一个复选框。因此，每当选中该复选框时，该值就会绑定(bind)。它运行良好。但我需要对很多卡执行此操作。我需要知道实现它的更好方法，而不是重复相同的代码。我看到了很多与此相关的解决方案，但没有用。

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

我不确定您是否指的是这个工作模型。正如 @Santhosh_mp 所说，你需要使用两个 ng-repeat。

请注意，值绑定(bind)将在唯一键上...

在您的情况下，您需要为每一行创建一个模型 key 并检查它是否存在，因此所有循环上的 key 引用都是相同的

 {
            "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 将需要再次编码。

所以我将键更改为value而不是d320

我不确定，为什么第二个 ng-repeat 的 ng-model 没有绑定(bind)绑定(bind)...所以我做了一个单独的函数并在初始化和每次模型更改时调用它

<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