Checkbox conditional class in Angular is not working

Question

In this simple example, I am trying to add a class to checkbox input if it is checked. I don't know why this simple example is not working. Can someone help me out?

<html>
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>  
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="checkbox" ng-model="isChecked" ng-class="{peter: isChecked}" />
    <script>
        //Module Declaration
        var app = angular.module('myApp',[]);
        //Controller Declaration
        app.controller('myCtrl',function($scope){
            //No code
        });
    </script> 
</body> 
</html>

I tried this out in a fiddle and it seems to work correctly to me. Adds the class 'peter' to the checkbox element when it is checked. Fiddle: jsfiddle.net/3symw9f0 — Adam Nierzad
– Adam Nierzad, Commented Apr 7, 2016 at 8:31

rrd · Accepted Answer · 2016-04-07 08:27:49Z

3

Your controller wasn't declared correctly.

<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
  //No code
});
</script>

answered Apr 7, 2016 at 8:27

rrd

5,9873 gold badges32 silver badges37 bronze badges

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

Comments

WoW · Accepted Answer · 2016-04-07 08:32:10Z

3

var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
  //No code
});

This is right code for controller.

answered Apr 7, 2016 at 8:32

WoW

412 bronze badges

Comments

Shashank Agrawal · Accepted Answer · 2016-04-07 08:28:23Z

2

Please provide more code. ~~I'll delete this answer if this is a typo but you are missing /> in the `input field.~~

~~Change <input type="checkbox" ng-class="{peter: isChecked}" to <input type="checkbox" ng-class="{peter: isChecked}" />.~~

Just change your line

app.controller = ('myCtrl',function($scope){
    //No code
});

to

app.controller('myCtrl',function($scope){
    //No code
});

Your controller was declared with the wrong syntax. There is dev console in every browser. You should fire it and first see the errors :-)

edited Apr 7, 2016 at 8:28

answered Apr 7, 2016 at 8:20

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Comments

Mogsdad · Accepted Answer · 2016-04-15 02:47:31Z

2

Your example works fine. When the checkbox is checked, i can see that:

<input type="checkbox" ng-class="{peter: isChecked}" ng-model="isChecked" class="ng-valid ng-touched ng-dirty ng-valid-parse peter">

edited Apr 15, 2016 at 2:47

Mogsdad

46k21 gold badges166 silver badges289 bronze badges

answered Apr 7, 2016 at 8:34

DonerKebab

5204 silver badges14 bronze badges

Collectives™ on Stack Overflow

Checkbox conditional class in Angular is not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related