Question

使用ng-class在Angular js小应用程序中工作，在选中复选框时动态更改类。

更具体地说，我想在办理入住和退房时更改复选框的背景颜色。

以下是我的代码段：

<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>

Answer 1

使用ischecked作为布尔值而不是字符串。

'ischecked':false

PLUNKR

ng-class不动态加载类

1 个答案: