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.

Try adding "checked=true" attribute to the required input elements (i.e. ABC and DEF in ur case) through Javascript/jquery. — Ajay B L
– Ajay B L, Commented Aug 22, 2017 at 10:50
Check this link it will help you. stackoverflow.com/questions/21352034/… — Narendra Solanki
– Narendra Solanki, Commented Aug 22, 2017 at 10:51
Possible duplicate of AngularJS ng-repeat setting default select value — Ajay B L
– Ajay B L, Commented Aug 22, 2017 at 10:53
Thanks Ajay. I understood i have to put checked=true but how can i make only ABC or DEF checked. How to do it in controller? — Niranjan Godbole
– Niranjan Godbole, Commented Aug 22, 2017 at 10:53
Have another property in your array of data type Boolean and send it with true/false value. Populate the Boolean property in checked attribute. — Deepesh kumar Gupta
– Deepesh kumar Gupta, Commented Aug 22, 2017 at 10:53

Daniel · Accepted Answer · 2017-08-22 11:12:36Z

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>

Hadi · Accepted Answer · 2017-08-22 11:08:52Z

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>

edited Aug 22, 2017 at 11:08

answered Aug 22, 2017 at 10:53

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

1 Comment

Niranjan Godbole Over a year ago

Thanks. On page load if i want to ABC or DEF checked then how to do that?

Gaurav Srivastava · Accepted Answer · 2017-08-22 11:24:07Z

2

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>

edited Aug 22, 2017 at 11:24

answered Aug 22, 2017 at 10:55

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

1 Comment

Niranjan Godbole Over a year ago

I want checkbox.

jANVI · Accepted Answer · 2017-08-22 10:56:53Z

1

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>

answered Aug 22, 2017 at 10:56

jANVI

7483 silver badges12 bronze badges

Comments

CIPHER007 · Accepted Answer · 2017-08-22 10:59:42Z

1

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>

answered Aug 22, 2017 at 10:59

CIPHER007

3763 silver badges13 bronze badges

Comments

Karthik RP · Accepted Answer · 2017-08-22 10:56:32Z

0

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

answered Aug 22, 2017 at 10:56

Karthik RP

1,0781 gold badge16 silver badges26 bronze badges

Comments

Deepesh kumar Gupta · Accepted Answer · 2017-08-22 11:00:45Z

0

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/

answered Aug 22, 2017 at 11:00

Deepesh kumar Gupta

8962 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angularjs how to make checkbox checked?

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related