Angularjs setting checkbox to true

Matt

unread,

Sep 19, 2013, 1:14:17 PM9/19/13

to ang...@googlegroups.com

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.

Here is the full controller:

rates.controller('getAddons',

function ($scope, $location, filterFilter, myService, $q) {
    $scope.loading = true;
    $scope.set_addons = false;
    myService.addons().then(function (addons) {
        $scope.addons = addons;
        $scope.loading = false;
        $scope.set_addons = true;
    });

    $scope.checkAddonDependencies = function () {
        $scope.loading = true;
        var addons = [];
        var queries = [];
        var arr = filterFilter($scope.addons, {
            checked: true
        });
        for (var i = 0; i < arr.length; i++) {
            element = arr[i].addoncode;
            addons.push(element);
        }
        for (var x = 0; x < addons.length; x++) {
        queries.push(myService.addon_dependencies(addons[x]));
        }

        $q.all(queries).then(function (data) {

            for (var i = 0; i < data.length; i++) {
                if (data[i].length !== 0) {
                    dep = data[i][0].addon_depend;
                    if (dep && dep !== null && document.getElementById(dep)) {
                     document.getElementById(dep).checked=true;      
                     addons.push(dep);
                    }
                }
            }
        myService.addItem('addons', addons.sort());
        });
    };


});

Jonathan El-Bizri

unread,

Sep 19, 2013, 1:40:38 PM9/19/13

to ang...@googlegroups.com

Here's a fiddle of a checkbox being controlled:

http://jsfiddle.net/DubbyTT/JmZes/

Is this what you are trying to do?

Jonathan

---------------------
Jonathan El-Bizri
415.830.5839
---------------------

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

Matt

unread,

Sep 19, 2013, 2:17:49 PM9/19/13

to ang...@googlegroups.com

No because the checkboxes are in an ng-repeat.

Adrian Lee

unread,

Sep 19, 2013, 5:02:39 PM9/19/13

to ang...@googlegroups.com

You can't use ng-model with checkbox and that's why there is separate directive called ng-checked (http://code.angularjs.org/1.0.8/docs/api/ng.directive:ngChecked).

Kai Groner

unread,

Sep 19, 2013, 10:01:22 PM9/19/13

to ang...@googlegroups.com

Hi Matt,

Just update addon.checked. The input directive will handle updating the DOM. You can skip the name and value attributes here, they don't mean anything to angular.