Question

我创建了一些动态模型名称的复选框，如下所示：

<label ng-repeat="item in main.itemDetails">
  <input type="checkbox" checklist-value="item.price"
  ng-click="itemChanged(item)" ng-model="checkboxes[item.name]">
   {{item.name}} - <b>{{item.price}} €</b>
   <br>
</label>

在我的控制器中，如果模型的名称存在于数组$ scope.selectedItems中，我想检查一些复选框。

我正在尝试做这样的事情，但它不起作用：

for (var i = 0, j = $scope.selectedItems.length; i<j; i++) {
            $scope['selectedItems[i].name'].isChecked = true;
        }

例如，如果item.name ='Item1'我想将模型命名为$ scope.Item1，之后我想调用$scope.Item1.isChecked = true;

我在这里做错了什么？

Answer 1

您正在将模型存储在$scope.checkboxes中，因此您可以将其值设置为true，如下面的代码所示。

for (var i = 0, j = $scope.selectedItems.length; i<j; i++) {
    $scope.checkboxes[$scope.selectedItems[i].name] = true;
}

Answer 2

看起来你在这里使用字符串文字：

for (var i = 0, j = $scope.selectedItems.length; i<j; i++) { $scope['selectedItems[i].name'].isChecked = true; }

只需将其更改为：

for (var i = 0, j = $scope.selectedItems.length; i<j; i++) { $scope[selectedItems[i].name].isChecked = true; }

Answer 3

＆＃13;

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.main = [{
    'name':'test1',
    'price':'23',
    'isChecked':false
    },
    {
    'name':'test2',
    'price': '25',
    'isChecked':false
    },
    {
    'name':'test3',
    'price': '21',
    'isChecked':false
    }];
    
    $scope.selectedItems = [{
    'name':'test1'
    },
    {
    'name':'test2'
    }];
    angular.forEach($scope.main, function(valueMain){
     angular.forEach($scope.selectedItems,function(valueSelected){
       if(valueMain.name=== valueSelected.name){
          valueMain.isChecked = true;
       }
      })
    
    });

    $scope.toggleCheck = function(item){
       if(item.isChecked === true){
         item.isChecked === false;
       }else{
         item.isChecked === true;
       }; 
    }
}

＆＃13;

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <label ng-repeat="item in main">
  <input type="checkbox" ng-model="item.isChecked" ng-checked="item.isChecked" ng-change="toggleCheck(item)">
   {{item.name}} - <b>{{item.price}} €</b>
   <br>
</label>
</div>
  </div>

＆＃13;

Angular Foreach是解决此类问题的最简单方法。

如何以动态模型名称以编程方式检查复选框？

3 个答案: