CODEWITHSUNDEEP
angularjs
Chandaneswar Sengupta
Chandaneswar Sengupta

Reputation: 13

ng-class not loading class dynamically

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>

Upvotes: 1

Views: 395

Answers (1)

msapkal
msapkal

Reputation: 8346

Use ischecked as boolean instead of string.

'ischecked':false

PLUNKR

Upvotes: 2

Related Questions