AngularJS: generate checkboxes with ng-repeat

Question

i got a code which i understand but a small area is not clear. so help me to understand please.

<div ng-controller="MainCtrl">
  <label ng-repeat="(color,enabled) in colors">
      <input type="checkbox" ng-model="colors[color]" /> {{color}} 
  </label>
  <p>colors: {{colors}}</p>

<script>
  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope){
      $scope.colors = {Blue: true, Orange: true};
  });
</script>

http://plnkr.co/edit/U4VD61?p=preview

see this line ng-model="colors[color]" how this line automatically set checkbox checked or unchecked state because in code we do not mention checked = true or false then how angular automatically extract true or false from model and set it in checkbox.......this is not clear. please guide me.

aspsnippets.com/Articles/…

Rohìt Jíndal
– Rohìt Jíndal

2016-04-06 09:20:55 +00:00
Commented Apr 6, 2016 at 9:20 — Rohìt Jíndal
– Rohìt Jíndal, Commented Apr 6, 2016 at 9:20

Community · Accepted Answer · 2017-05-23 12:10:05Z

2

angular ng-model checks checkbox if ng-model value is true. You have given Blue as true. So ng-model checks the checkbox.

If you using angular ng-model it will automaticaly fills value of any form field. You don't need to put ng-checked = true or something

How to check if any Checkbox is checked in Angular

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Apr 6, 2016 at 9:16

Praveen Srinivasan

1,6204 gold badges28 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nico Over a year ago

Do you have a link that explains this ? Not that I don't believe you but I'd like to read up on that.

Praveen Srinivasan Over a year ago

You could check with angularjs input checkbox page

Mou Over a year ago

yes i understand thanks a lot. i would mark it as answer :)

Collectives™ on Stack Overflow

AngularJS: generate checkboxes with ng-repeat

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related