Angularjs how to make checkbox checked?

Question

Hi I am developing web application in angularjs. I have one form. I am binding values to multi select dropdown.

  <li ng-repeat="p in locations">
  <input type="checkbox" ng-checked="master" ng-model="isTrue" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
  <span>{{p.Location}}</span>
  </li>

I am binding array to locations. My array look likes

0:  id: 1  Location:"ABC"
1:  id: 2  Location:"DEF"
2:  id: 3  Location:"IJK"

Now my requirement is to make checked some values. Suppose if i have var locations="ABC,DEF" then i want to make only those values checked. May i know if this can be done. Any help would be appreciated. Thank you.

Answer 1

Basically, if our input is a string with the locations that should be selected (i.e) var locations = 'ABC,DEF'; we can split this string by the , character and get an array with the locations to match:

var app = angular.module('myApp', []);

app.controller("locationsController", ["$scope",
    function ($scope) {
        // vars 
        var locations = 'ABC,DEF';
    
        // functions
        function init () {
            var locals = locations.split(',');
        
            angular.forEach($scope.locations, function (item) {
                if (locations.indexOf(item.Location) > -1) {
                    item.checked = true;
                }
            });
        }
    
        // $scope
        $scope.locations = [
            { id: 1, Location: "ABC" }, 
            { id: 1, Location: "DEF" }, 
            { id: 1, Location: "IJK" }
        ];
        
        // init
        init();
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
   <div ng-controller="locationsController">
      <li ng-repeat="p in locations">
         <input ng-checked="p.checked" type="checkbox" ng-model="p.checked" required/>
         <span>{{ p.Location }}</span>
      </li>
   </div>
</div>

Answer 2

Try this. Define for each checkbox separate model.

var app = angular.module('myApp', []);

app.controller("Controller", ["$scope",
  function($scope) {
    $scope.locations = [{
      "id": 1,
      Location: "ABC"
    }, {
      "id": 1,
      Location: "DEF"
    }, {
      "id": 1,
      Location: "IJK"
    }]

    var checked = ['ABC','DEF'];
    function init() {
      angular.forEach($scope.locations,function(location){
        if(checked.indexOf(location.Location) != -1){
          location.checked = true;
         }
      })
    }
    init();

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">
    <li ng-repeat="p in locations">
      <input type="checkbox" ng-model="p.checked" name="location" required/>
      <span>{{p.Location}}</span>
    </li>
  </div>
</div>