Angularjs setting checkbox to true

Question

I'm trying to set a checkbox to true with Angularjs. Right now I'm cheating using vanilla javascript to manipulate the DOM, but I want to do it the right way with Angularjs.

Here is the view:

<div x-ng-repeat="addon in addons">
  <label for="{{addon.addoncode}}">
    <input type="checkbox"  
    name="{{addon.addoncode}}" 
    value="{{addon.addoncode}}"  
    id="{{addon.addoncode}}"  
    x-ng-model="addon.checked" 
    x-ng-click="checkAddonDependencies()"  >
   <span x-ng-bind-html="addon.addon_desc">{{addon.addon_desc}}</span> </label>
</div>

And here is the relevant part of the controller:

 if (document.getElementById(dep)) {
    document.getElementById(dep).checked=true;
     }

The dep value is equal to the addoncode value, so if it exists I check the box. This works and checks the box but how could I do this using the scope instead?

I tried:

x-ng-model="addon.addoncode"

with

$scope.addon.dep = true;

But no luck... any help appreciated. Thanks.

Maxim Shoustin · Accepted Answer · 2013-09-19 18:30:19Z

3

HTML

<div ng-repeat="addon in addons">
  <label for="{{addon.addoncode}}">
   <input type="checkbox"  
     name="{{addon.addoncode}}" 
     value="{{addon.addoncode}}"  
     id="{{addon.addoncode}}"  
     ng-model="addon.checked" 
     ng-click="checkAddonDependencies()"  >
  <span ng-bind-html="addon.addon_desc">{{addon.addon_desc}}</span> </label>
 </div>

Controller

function countController( $scope, $timeout )
{
$scope.addons = [
   {
       checked: true
   },
    {
       checked: false
   }
];   
}

see in Fiddle

[EDIT]

The main point of angular is you don't need to worry about to update HTML. you just need change your $scope.addons.

you can see how your code works with promises and how you add items every 3 sec to $scope.addons. I simulated async task by delay service.

Fiddle 2

BTW, I didn't touch your HTML

edited Sep 19, 2013 at 18:30

answered Sep 19, 2013 at 13:28

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

4 Comments

suncoastkid Over a year ago

But addons is already set: myService.addons().then(function (addons) { $scope.addons = addons;

Maxim Shoustin Over a year ago

well, i didn't know about , you use promises a.e. async methods, its other story

suncoastkid Over a year ago

Thanks but I still don't have it. I don't want to push new texboxes into the scope. I need to check the box that matches the value returned by my service.

Maxim Shoustin Over a year ago

well, this is direction I pointed, I think you have enough posted info , no one will read all your code and find the problem, but I did my best to help you

Eugenio Cuevas · Accepted Answer · 2013-09-19 13:26:16Z

0

Your object addon only exists inside the ng-repeat on your template. On the controller you should have something like:

$scope.addons[0].isChecked = true;

As addons is an array. Note that isChecked could take any property name

Then on the template use:

<div x-ng-repeat="addon in addons">
  <label for="{{addon.addoncode}}">
    <input type="checkbox" x-ng-model="addon.isChecked" x-ng-click="checkAddonDependencies()"  >
   <span x-ng-bind-html="addon.addon_desc">{{addon.addon_desc}}</span> </label>
</div>

answered Sep 19, 2013 at 13:26

Eugenio Cuevas

11.1k3 gold badges33 silver badges51 bronze badges

Comments

suncoastkid · Accepted Answer · 2013-09-24 15:16:50Z

0

This turned out to be a simple thing to do. Instead of using the checkbox id:

document.getElementById(dep).checked=true;

I just needed to use the angular filter:

var x = filterFilter($scope.addons, {
    addoncode: dep
});                 

x[0].checked = true;

answered Sep 24, 2013 at 15:16

suncoastkid

2,2337 gold badges27 silver badges45 bronze badges

Collectives™ on Stack Overflow

Angularjs setting checkbox to true

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related