Have input checkbox toggle checked/unchecked in AngularJS 1.x

Question

I am still new to AngularJS, I am trying to have a simple function that will toggle a checkbox on/off when clicked. So a clicked li element in the code below will either set that checkbox to on or off.

Can anyone suggest the best way to do this using AngularJS, I know jQuery would be simple but i'm trying to do this in the Angular way.

my html template

    <ul>
        <li ng-repeat="page in rule.pages" ng-click="toggleNetwork(page.id); ruleForm.$setDirty()">
            <span class="pull-left"><i class="check material-icons nomargin">{{rule.pages.indexOf(page.id) >= 0 ? 'check_box' : 'check_box_outline_blank'}}</i></span>
        </li>
    </ul>

my Controller scope logic code

$scope.toggleNetwork = function(networkId) {
   // function called when checkbox clicked

}

Pedro Vaz · Accepted Answer · 2016-11-25 15:04:20Z

1

IF you just want the checkbox to toggle on/off, you don't really need to do anything. Angular will do it for you out of the box.

you only need a boolean variable in your controller, like this:

//myController.js

$scope.myCheckboxValue = false;

And your html should be something like this:

//myTemplate.html

<input type="checkbox" ng-model="myCheckboxValue">

Whenever you click the checkbox, the changes will already be reflected on myCheckboxValue.

answered Nov 25, 2016 at 15:04

Pedro Vaz

8201 gold badge5 silver badges11 bronze badges

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

Comments

pato · Accepted Answer · 2016-11-25 14:30:09Z

0

I don't see checkbox in your html so I'm assuming that you want to li tag working as checkbox.

You can do it that way, if page can have additional property:

$scope.toggleNetwork = function(network) {
   network.toggle = !network.toggle;
}

If you don't want to add property to network model you can store toggled networks in array;

$scope.toggledNetworks = [];
$scope.toggleNetwork = function(networkId) {
   var index = $scope.toggledNetworks.indexOf(networkId);
   if (index === -1) 
       $scope.toggledNetworks.splice(index, 1);
   else 
       $scope.toggledNetworks.push(networkId)
}

Then if you want to check if network is toggled you can use function:

$scope.isToggled = function(networkId) {
    return $scope.toggledNetworks.indexOf(networkId) !== -1;
}

Note:

rule.pages.indexOf(page.id)

Will always return -1. Pages contains objects, you want index of property of one object which is not in this array

answered Nov 25, 2016 at 14:30

pato

9086 silver badges10 bronze badges

1 Comment

pato Over a year ago

In the same controller. This function can be used for instance to change class: ng-class="isToggled(page.id) ? 'toggled' : 'not-toggled'"

Collectives™ on Stack Overflow

Have input checkbox toggle checked/unchecked in AngularJS 1.x

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related