Как изменить класс на отмеченных нескольких флажках в AngularJS

У меня есть список флажков, они в классическом ng-repeat. Я хочу изменить класс метки при проверке моих флажков по отдельности. Прямо сейчас у меня есть все флажки с классом checked. Что не так?Как изменить класс на отмеченных нескольких флажках в AngularJS

<fieldset class="g-checkbox_square_big box-inline-full_width-relative"> 
    <label class="box-full_width-grid-vertical_align_middle" ng-class="{checked: 'area_selected_' + area.id}"> 
     <div class="g-checkbox-dummy"></div> 
     <img src="{{area.icon.icon.small.url === null ? '/public/images/image-placeholder.svg': area.icon.icon.small.url}}" class="shift-padding_2-horizontal" alt="Area Image"> 
     <span class="text-size_big-color_appblue">{{ area.title }}</span> 
    </label> 
    <input type="checkbox" ng-bind-model="'area_selected_' + area.id" data-id="{{area.id}}"/> 
</fieldset>

FYI: вход покрывает все фиктивные флажки.

источник

2017-01-20 Lukas

Ca вы разработать _change класс этикетки на проверку моих флажков individually._? – Satpal

нажмите на вход - измените его состояние = измените класс ярлыка sibling – Lukas

создайте новую функцию для изменения статуса объекта 'area' и вызовите эту функцию на' ng-change' вашего флажка – Dinesh

без контроллера изменяет

<fieldset class="g-checkbox_square_big box-inline-full_width-relative"> 
    <label class="box-full_width-grid-vertical_align_middle" ng-class="area.checked?'checked':''"> 
     <div class="g-checkbox-dummy"></div> 
     <img src="{{area.icon.icon.small.url === null ? '/public/images/image-placeholder.svg': area.icon.icon.small.url}}" class="shift-padding_2-horizontal" alt="Area Image"> 
     <span class="text-size_big-color_appblue">{{ area.title }}</span> 
    </label> 
    <input type="checkbox" ng-bind-model="area.checked" data-id="{{area.id}}" /> 
</fieldset>

источник

2017-01-20 11:12:15 Dinesh

чувак, магия, thx он отлично работает – Lukas

Попробуйте

<fieldset class="g-checkbox_square_big box-inline-full_width-relative"> 
<label class="box-full_width-grid-vertical_align_middle" ng-class="{checked: area_selected_{{area.id}}}"> 
    <div class="g-checkbox-dummy"></div> 
    <img src="{{area.icon.icon.small.url === null ? '/public/images/image-placeholder.svg': area.icon.icon.small.url}}" class="shift-padding_2-horizontal" alt="Area Image"> 
    <span class="text-size_big-color_appblue">{{ area.title }}</span> 
</label> 
<input type="checkbox" ng-bind-model="area_selected_{{area.id}}" data-id="{{area.id}}"/>

источник

2017-01-20 11:14:03 Aravinder

Вот ответ без взаимодействия с контроллером, как вам необходимо.

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<style> 
 
.checked 
 
{ 
 
background: blue; 
 
} 
 
</style> 
 
<body> 
 

 
<div ng-app="" ng-init="areas=['1','2','3']"> 
 
    <p>Looping with ng-repeat:</p> 
 
    <ul> 
 
    <li ng-repeat="area in areas"> 
 
     <label ng-class="{checked: show}">{{'area'+area}} 
 
    </label> 
 
    <input type="checkbox" ng-bind-model="'area' + area" ng-click="show = !show"/> 
 
</fieldset> 
 
     {{ x }} 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

Пожалуйста, запустите выше фрагмент кода

HEre is a working DEMO

источник

2017-01-20 11:15:35 Sravan

@Lukas, проверьте мой код, если он работает. – Sravan

Как изменить класс на отмеченных нескольких флажках в AngularJS

ответ

Смежные вопросы