AngularJS hardcode checkbox filter

Question

I've a tricky question. How can I filter a scrope with multiple checkbox ?

This is my scope :

function UserListCtrl($scope, $filter) {
    $scope.users =[{"user_id":"3","first_name":"Nathalie","last_name":"ABBAS DE CLAUZADE","societe_1":"Strasbourg Magazine \/ CUS Magazine","societe_2":false,"index_1":false,"index_2":false,"index_4":false,"index_5":false,"index_6":false,"index_7":false,"index_8":false,"index_9":false,"index_10":false,"index_11":false,"index_12":true,"index_13":false,"index_14":false,"index_15":false,"index_16":false,"alphabetical":"A"},{"user_id":"4","first_name":"Richard","last_name":"ABOAF","societe_1":"Lyc\u00e9e ORT","societe_2":false,"index_1":false,"index_2":false,"index_4":false,"index_5":false,"index_6":false,"index_7":false,"index_8":true,"index_9":false,"index_10":false,"index_11":false,"index_12":false,"index_13":false,"index_14":false,"index_15":false,"index_16":false,"alphabetical":"A"},":false,"alphabetical":"S"},{"user_id":"679","first_name":"Giulia","last_name":"SILVESTRINI","societe_1":"actas.it","societe_2":false,"index_1":false,"index_2":false,"index_4":false,"index_5":false,"index_6":false,"index_7":false,"index_8":false,"index_9":false,"index_10":false,"index_11":false,"index_12":true,"index_13":false,"index_14":false,"index_15":false,"index_16":false,"alphabetical":"S"}]      
}

And this is my loop (I've different loop for each letter) :

<div class="content">
    <ul>
       <li ng-repeat="user in users | filter: { alphabetical: 'A'} | filter:query">
         <p><strong>{{user.first_name}} {{user.last_name}}</strong> <span ng-hide="user.societe_1 == ''" class="societe">{{user.societe_1}}</span> <span ng-hide="user.societe_2 == ''" class="societe">{{user.societe_2}}</span></span></p>
       </li>                    
    </ul>                   
</div>

So, this is alright, I use an input:text to search firstname et lastname. But my question is, how can I use a checkbox to filter my loop ?

I tried :

<p class="checkbox"><label for="">Collectivités, service public</label> <input type="checkbox" ng-model="index_2.true"></p>

But it doesn't work

Yoshi · Accepted Answer · 2013-12-12 10:06:53Z

1

You can apply the same logic as with your alphabetical fitler, e.g.:

... | filter:{index_2: index_2}

Though, the checkbox-model has to exist in the scope, so:

ng-model="index_2.true"

should be (though not necessarily named index_2):

<input type="checkbox" ng-model="index_2">

demo: http://jsbin.com/aqADExE/1/

answered Dec 12, 2013 at 10:06

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

Collectives™ on Stack Overflow

AngularJS hardcode checkbox filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related