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>
4 answers
solution1
3 2016-04-07 08:27:49
Your controller wasn't declared correctly.
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
//No code
});
</script>
solution2
3 2016-04-07 08:32:10
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
//No code
});
This is right code for controller.
solution3
2 ACCPTED 2016-04-07 08:20:45
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 :-)
solution4
2 2016-04-07 08:34:55
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.