Question

我有一个输入字段类型复选框，我想在检查时取消选中并取消选中，我尝试ng-class = "unChecked =!checked"这样，但不适合我。

这是我的HTML代码：

<input type="checkbox" ng-class = "unChecked =!checked" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" />Product Name
                <br/>

请告诉我该怎么做？

Answer 1

试试这个。 ng-value-true的复选框默认值为＆＃39; true＆＃39;和ng-false-value是“假”＆＃39;。

  ng-class = "{'checked': inventory.productName, 'unchecked' : !inventory.productName}"

＆＃13;

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
   $scope.inventory = {productName:false};
})

＆＃13;

.checked{
    background-color:red;
  }

.unchecked{
   background-color:green;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  
  <div ng-class = "{'checked': inventory.productName, 'unchecked' : !inventory.productName}">
   <input type="checkbox"  class="checkbox" ng-model="inventory.productName"  />Product Name
                </div>
</div>

＆＃13;

Answer 2

试试这个。你必须添加条件类。这是工作fiddle

<input type="checkbox"  ng-model="inventory.productName" ng-true-value="true" ng-false-value="false" /><span ng-class = "{'checked': inventory.productName=='true', 'unChecked' : inventory.productName=='false'}">Product Name</span>
            <br/>

Answer 3

将ng-class更改为ng-class="{'unChecked' : !inventory.productName}"。

话虽如此，你真的需要角度/ javascript吗？在css中你可以这样做：

.checkbox{
/// Styles when unchecked
}

.checkbox:checked{
//// Styles when checked
}

Answer 4

使用此代码

<input type="checkbox" ng-class = "{'class1':inventory.productName == 'PRODUCT NAME', 'class2':inventory.productName != 'PRODUCT NAME'}" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" />Product Name

Answer 5

参考demo。

请找到以下代码：

<强> HTML：

<div ng-app="app" ng-controller="test">
  <label ng-class="{'red': inventory.productName == 'false', 'green': inventory.productName == 'true'}">
    <input type="checkbox" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" ng-init="inventory.productName = 'true'"
    />Product Name
  </label>
  <br/>
</div>

<强> JS：

var app = angular.module('app', []);

app.controller('test', function($scope) {

});

<强> CSS：

.red {
  color: red;
}

.green {
  color: green;
}

在选中或取消选中时更改CheckBox的颜色？

5 个答案: