How to programmatically check checkbox with dynamic model name?

问题

I have created a some checkboxes with dynamic model name like this:

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

In my controller, I want to check some checkboxes if their model's name exists in array $scope.selectedItems.

I'm trying to do something like this but it isn't working:

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

for example if item.name = 'Item1' I want the model to be named $scope.Item1 and later I want to call $scope.Item1.isChecked = true;

What Am I doing wrong here?

回答1:

Your are storing the model in the $scope.checkboxes, so you can set its value to true like the code below.

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

回答2:

It looks like your using a string literal here:

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

Just change this to read:

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

回答3:

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

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

Angular Foreach is the easiest way to solve this kind of problem.

来源：https://stackoverflow.com/questions/40180228/how-to-programmatically-check-checkbox-with-dynamic-model-name

标签

angularjs