Ckecklist with angular

Question

Ckecklist with angular

Navigation

#1 by (0 votes)

1

I need some help. I want to create a checklist in which the items are true according to a list that I move to the selected scope. And this list is updated as I go by clicking on the checks. If you click on All the list must be updated with all items and unchecking passes all to false. Any suggestion? Thank you.

app.controller("TesteController", function ($scope, $http, $window, $location) {

$scope.selected = ['A','C'];


}

<html>
<body>

<div class="row m-t-30px">
      <div class="col-md-12">
           <input type="checkbox" checked> <strong>Check Todos</strong>
      </div>
</div>
<div class="row">

<div class="row"> 
 <div class="col-md-12">
                  <div class="user-perfil">
                     <input type="checkbox" checked> A                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" checked> B                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" checked> C                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" checked> D                                          
                  </div>
 </div>
</div>
</body>
</html>

angularjs

asked by anonymous 16.02.2018 / 18:02

1 answer

Create fields with ngFor Problem calling Class Activitity

score 0 · Answer 1

Here's a suggestion for you using Jquery just in case select all inputs of type checked .

$('#check-all').change(function(){
  if(this.checked){
     $('input[type="checkbox"]').attr('checked','true');
  }
  else $('input[type="checkbox"]').removeAttr('checked');
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row m-t-30px">
      <div class="col-md-12">
           <input type="checkbox" id="check-all"> <strong>Check Todos</strong>
      </div>
</div>
<div class="row">

<div class="row"> 
 <div class="col-md-12">
                  <div class="user-perfil">
                     <input type="checkbox" > A                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" > B                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" > C                                          
                  </div>
                  <div class="user-perfil">
                     <input type="checkbox" > D                                          
                  </div>
 </div>

I have edited the answer to be able to assign the checked attribute if the first one is selected and if it is not checado , the others will not be too.