How to change class on checked multiple checkboxes in AngularJS

Question

I have some list of checkboxes, they're in classic ng-repeat. I wish to change class of label on checking my checkboxes individually. Right now i have all checkboxes with checked class. What is wrong?

<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 : The input is covering all dummy checkbox space.

Ca you elaborate change class of label on checking my checkboxes individually.? — Satpal
– Satpal, Commented Jan 20, 2017 at 10:59
click on input - change it state = change class of sibling label — Lukas
– Lukas, Commented Jan 20, 2017 at 11:00
create new function to change status of your area object and call that function on ng-change of your checkbox — Dinesh
– Dinesh, Commented Jan 20, 2017 at 11:05
there is no way to manipulate it without the controller integration? — Lukas
– Lukas, Commented Jan 20, 2017 at 11:11

Dinesh · Accepted Answer · 2017-01-20 11:17:50Z

2

without controller changes

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

edited Jan 20, 2017 at 11:17

answered Jan 20, 2017 at 11:12

Dinesh

3441 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aravinder · Accepted Answer · 2017-01-20 11:14:03Z

0

Try this

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

answered Jan 20, 2017 at 11:14

Aravinder

5034 silver badges8 bronze badges

Comments

Sravan · Accepted Answer · 2017-01-20 11:15:35Z

0

Here is an answer without interacting with controller, as you needed.

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

Please run the above snippet

HEre is a working DEMO

answered Jan 20, 2017 at 11:15

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to change class on checked multiple checkboxes in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related