Изменить цвет CheckBox на проверку или снять флажок?

Question

Изменить цвет CheckBox на проверку или снять флажок?

0

У меня есть флажок типа поля ввода, и я хочу изменить цвет при проверке и снять ng-class= "unChecked =!checked", я попробовал 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/>

Скажите, пожалуйста, как я могу это сделать?

Anita Mehta 26 апр. 2016, в 09:43

Источник

Теги:

angularjs

checkbox

5 ответов

Ещё вопросы

Hadi J · Answer 1 · 2016-04-26T03-58-00.000Z

попробуй это. Значение по умолчанию для галочки для ng-value-true - "true", а ng-false-значение - "false".

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

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

.checked{
    background-color:red;
  }

.unchecked{
   background-color:green;
  }

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

Спасибо за ответ, но я хотел, чтобы флажок поменял цвет фона
посмотреть этот ответ stackoverflow.com/questions/7398462/…

Shashank · Answer 2 · 2016-04-26T05-13-00.000Z

См. Демонстрацию.

Вы найдете следующий код:

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

Я должен изменить цвет фона флажка, это возможно
Вы можете заменить атрибут color в CSS на атрибут background-color
Я пробовал оба background-color, background свойство, оно не принимает

Devidas Kadam · Answer 3 · 2016-04-26T05-09-00.000Z

0

попробуй это. вы должны добавить условный класс. Вот рабочая скрипка

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

Devidas Kadam 26 апр. 2016, в 05:09

0

onclick, он добавляет только непроверенный и после этого не меняется. <input type = "checkbox" ng-class = "inventory.productName? 'checked': 'unChecked'" class = "checkbox ng-valid unChecked ng-dirty ng-valid-parse ng-touched "value =" Идентификатор устройства "ng-model =" inventory.deviceId "ng-click =" inventory.addRemoveColumn (inventory.deviceId, 'deviceId', 'DEVICE ID') ">
Anita Mehta 26 апр. 2016, в 07:07
0

попробуйте обновленный код
Devidas Kadam 26 апр. 2016, в 07:44
0

Также, если бы вы могли отметить это как ответ, это было бы полезно для меня и других пользователей SO
Devidas Kadam 27 апр. 2016, в 19:13

Показать ещё 1 комментарий

byteC0de · Answer 4 · 2016-04-26T04-28-00.000Z

Используйте этот код

<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

Ahmed Wagdi · Answer 5 · 2016-04-26T04-16-00.000Z

измените ng-класс на ng-class="{'unChecked': !inventory.productName}".

Это, как говорится, вам действительно нужен угловой /javascript для этого? в css вы можете сделать это:

.checkbox{
/// Styles when unchecked
}

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