ng-class not loading class dynamically

Question

Worked in Angular js small app, using ng-class, dynamically changing the class on checking the check box.

To be more specific, I want to change the background-color of the checkbox, on checking in and off.

Below is my code snippet :

<style>
    .unchecked{
                background-color: red;
                color:yellow;   
            }
            .checked{
                background-color: green;
                color:yellow;
            }
        </style>
        <script type="text/javascript">
        var myController = function($scope){
            console.log("Controller works fine");
            $scope.countries=[
                {'name':'India','capital':'Delhi','ischecked':'false'},
                {'name':'Bangladesh','capital':'Dhaka','ischecked':'false'},
                {'name':'Sri Lanka','capital':'Colombo','ischecked':'false'},
                {'name':'Pakistan','capital':'Islamabad','ischecked':'false'}
            ];
        }
        </script>

<body ng-app="" ng-controller="myController">
        <div ng-repeat="country in countries" class="unchecked" ng-class="{checked:country.ischecked}">
        <input type="checkbox" id="{{country.name}}" name="{{country.name}}" ng-model="country.ischecked">{{country.name}}
        {{country.ischecked}}
    </div>
</body>

msapkal · Accepted Answer · 2014-11-26 08:08:00Z

2

Use ischecked as boolean instead of string.

'ischecked':false

PLUNKR

answered Nov 26, 2014 at 8:08

msapkal

8,3462 gold badges34 silver badges48 bronze badges

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

1 Comment

Chandaneswar Sengupta Over a year ago

Thanks Mahesh.It helped me a lot, as a beginner.

Collectives™ on Stack Overflow

ng-class not loading class dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related