Sorting item with checkbox checked at the top of the list in AngularJS

Question

Im comparing two object arrays and displaying them with those that have the same object checkbox checked. I now want to sort the list the with checkbox check to be first as a default state. I also want to sort by clicking the header to sort by ascending order .

 <div>header</div>
    <div class="search" ng-repeat="items in products ">
        <label >{{item.name}}</label>

   <input type="checkbox" ng-model="item.checked" 
                          ng-click="checked(item,productlist)"
                          ng-checked=" checked(item,productlist)"> 
    </div>

I tried using orderBy:[‘-checked’,’item’]: true to sort the checked ones on top but its not working. Any ideas

You've forced the second argument to orderBy to true, which will always sort the items in reverse order. Also, specifying 'item' as a secondary ordering field might not work as you'd expect because it'd be comparing by object reference. plnkr.co/edit/quxAI4?p=preview — miqh
– miqh, Commented Sep 6, 2018 at 22:25
Thanks this works fine when checkbox are tick after page load but not when checkbox are pre-check before page load. — Kofi
– Kofi, Commented Sep 9, 2018 at 11:06

hayzey · Accepted Answer · 2018-09-07 03:24:48Z

A few problems here...

You have ng-repeat="items in products", but then you refer to item instead of items within this scope.
You have this checked() method that you're passing to ng-click and ng-checked. What exactly is this doing? You should never be using ng-checked in conjunction with ng-model - https://docs.angularjs.org/api/ng/directive/ngChecked
By passing '-checked' to orderBy, items will be ordered by their checked value in reverse, i.e. they will be ordered false first, true last. Then you're passing true as the reverse parameter to orderBy, so the list will be reversed again. You're reversing the ordering twice unnecessarily - https://docs.angularjs.org/api/ng/filter/orderBy

This might work better...

<div>header</div>
<div class="search" ng-repeat="item in products | orderBy: 'checked'">
    <label>{{item.name}}</label>
    <input type="checkbox" ng-model="item.checked">
</div>

Collectives™ on Stack Overflow

Sorting item with checkbox checked at the top of the list in AngularJS

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