如何改變ng級的條件？

我有一個標籤，它具有基於3種不同條件的等級值。如何改變ng級的條件？

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' : ''; 

}

遺憾與混亂:)

來源

2014-10-03 nam vo

而是結合功能，使用模型來迷惑。

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

來源

2014-10-03 11:12:04

完整的示例：

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

來源

2014-10-03 11:21:51

感謝，但或許我並不清楚我的問題。我沒有問題綁定ngclass的狀態。點擊時我需要將標籤的cssClass更改爲'checked'。這意味着標籤有3個條件：域不可用，域可用和檢查 – 2014-10-03 13:42:54

更新我的答案。現在複選框有3個類依賴於它的狀態。如果它不可用，我也禁用複選框。 – 2014-10-03 16:24:21

如何改變ng級的條件？

回答

相關問題