Question

我有一个基于3种不同条件的类别值的标签。

status = true => domain available 
status =false=> domain not available

click => domain is selected

但点击它时，类应更改为“check-yes1”。如何在点击时更改cssClass？

<div ng-repeat="(key,value) in newReg.checkedDomains | groupBy: 'domain'">
     <label class="checkbox-inline" ng-class="{'check-yes' : ext.status==true}" ng-repeat="ext in value">
           <input type="checkbox">  
     </label>
</div>

我甚至试过像

这样的东西

 <label class="checkbox-inline" ng-click="updateSelectStatus(ext.status,true)" ng-class="updateSelectStatus(ext.status,false)" ng-repeat="ext in value">
           <input type="checkbox">  
 </label>

$scope.updateSelectStatus = function (status, selected) {

    if (selected) {

        return 'checked';
    }

    return status == 'true' ? 'check-yes' : '';

}

抱歉与乱七八糟的混淆:)

Answer 1

完整示例：

    <!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
        <style>
            .check-yes {
                background-color: green;
            }
            .available {
                background-color: yellow;
            }
            .not-available {
                background-color: red;
            }
        </style>
    </head>
    <body ng-app="plunker">
        <div  ng-controller="MainCtrl">
            <div ng-repeat="(key,value) in newReg.checkedDomains">
                <label class="checkbox-inline"
                       ng-class="{'check-yes': ext.available && ext.status,
                                  'available': ext.available && !ext.status,
                                  'not-available': !ext.available}"
                       ng-repeat="ext in value">
                    {{ext.name}} <input type="checkbox" ng-model="ext.status" ng-disabled="!ext.available">  
                </label>
            </div>
        </div>
        <script>
            var app = angular.module('plunker', []);
            app.controller('MainCtrl', ['$scope', function($scope) {
                $scope.newReg = {checkedDomains: 
                    [
                        [{
                            status: true,
                            available: true,
                            name: 'com'
                        },{
                            status: false,
                            available: false,
                            name: 'org'
                        }],
                        [{
                            status: false,
                            available: true,
                            name: 'net'
                        },{
                            status: false,
                            available: true,
                            name: 'biz'
                        }]
                    ]
                };

            }]);
        </script>
    </body>
</html>

Answer 2

使用model。

，而不是绑定到函数

<label class="checkbox-inline" ng-class="{'check-yes' : ext.status}" ng-repeat="ext in value">
      <input type="checkbox" ng-model='ext.status'/>
</label>

如何在条件下改变ng-class？

2 个答案: