Angularjs - Как изменить цвет фона с помощью переключателя

Question

На моей странице я динамически создал переключатели. Я хочу изменить цвет фона оболочки, когда выбран переключатель.

ниже мой код

<section ng-repeat="list in myList">
  <div class="radioWrapper">
    <input type="radio" name="{{list.category}}" ng-model="list.name">
    <label>{{list.name}} </label>
   </div>
</section>

Я хочу добавить класс selectedRadioBg в radioWrapper, когда выбрано каждое радио.

Цени любую помощь

Answer 1

<section ng-repeat="list in myList">
  <div ng-class="myClass">
    <input type="radio" name="{{list.category}}" ng-model="list.name">
    <label>{{list.name}} </label>
   </div>
</section>

// in controller/link

if($scope.list.name){
  $scope.myClass = {background: #B250C2};
}

Смотрите: ngClass

Что происходит

Вы получили модель ngModel list.name на вашем радио кнопку. Если радио проверено, его значение оценивается как true

Вы следите за истинным значением $scope.list.name и устанавливаете объект с именем myClass в вашей области, которая содержит стили. Этот объект привязан к вашей разметке:

<div ng-class="myClass">

Answer 2

<section ng-repeat="list in myList">
    <div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
        <input type="radio" name="{{list.category}}" ng-model="list.name">
        <label>{{list.name}} </label>
    </div>
</section>

Заменить

<section ng-repeat="list in myList">
    <div class="radioWrapper" style="background: {{list.name}} none repeat scroll 0% 0%;">
        <input type="radio" name="{{list.category}}" ng-model="list.model">
        <label>{{list.name}} </label>
    </div>
</section>

** Не помещайте ваш list.name в директиву ng-model.

Answer 3

Вы можете использовать ng-class директивы. Документацию можно найти здесь.

Эта директива позволяет вам условно применять класс, основанный на выражении, в данном случае выбор переключателя.

Итак, используя ваш пример, вы можете получить следующий код:

<div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
    <input type="radio" name="{{list.category}}" ng-model="list.name">
    <label>{{list.name}} </label>
</div>

list.name действует как истинное / ложное выражение здесь.