CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Angularjs how to make checkbox checked?

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.

Upvotes: 2

Views: 21628

Answers (7)

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

It should work:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$filter) {

  $scope.selectedValue = 'ABC,IJK';
  $scope.selectedValue = $scope.selectedValue.split(',');
 
  $scope.options = [{
    id: 0,
    name: 'ABC'
  }, {
    id: 1,
    name: 'DEF'
  }, {
    id: 2,
    name: 'IJK'
  }];
  $scope.selected = [];
  angular.forEach($scope.selectedValue,function(val,key){
  var r = $filter('filter')( $scope.options, {name: val})[0].id;  
  if(r != undefined){
   $scope.selected[r]=true;
  }else{
   $scope.selected[r]=false;
   }
  
 
  });
  

});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <li ng-repeat="p in options">
      <input type="checkbox" ng-model="selected[p.id]" ng-change="getIndex(p.Location,isTrue )" />
      <span>{{p.name}}</span>
    </li>
    Selected : {{selected}}
  </div>

Upvotes: 2

Daniel
Daniel

Reputation: 717

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>

Upvotes: 4

Hadi
Hadi

Reputation: 17289

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>

Upvotes: 2

Deepesh kumar Gupta
Deepesh kumar Gupta

Reputation: 896

Add another variable to your array. and set the value true/false in it 

0:  id: 1  Location:"ABC" flag : true
1:  id: 2  Location:"DEF" flag : false

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

Use that flag to check unchek ur checkbox/

Upvotes: 0

CIPHER007
CIPHER007

Reputation: 376

Add one more field checked:"true" with your locations like this

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

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

  }
]);
<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 ng-checked="{{p.checked}}" type="checkbox" ng-model="p.id"  name="location" required/>
      <span>{{p.Location}}</span>
    </li>
  </div>
</div>

Upvotes: 1

jANVI
jANVI

Reputation: 748

Try this:

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

Upvotes: 1

Karthik RP
Karthik RP

Reputation: 1078

Try this, Since you need different ngModel for each check box, you need to put them inside the location object itself.

HTML:

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

In Javascript:

$scope.locations = [
    {id: 1  Location:"ABC"},
    {id: 2  Location:"DEF"},
    {id: 3  Location:"GHI"}
];
var selectedLocations="ABC,DEF";
selectedLocations = locations.split(",");
angular.forEach($scope.locations, function(loc){
    loc.isTrue = selectedLocations.indexOf(loc.Location) > -1;
});

Upvotes: 0

Related Questions