Search code examples
angularjsng-optionsangularjs-select

How can I use ng-select group by for boolean value, with an order and label?


I have some data:

0: {id: 1, name: "hhh", description: "hhh", isPopular: false,…}
1: {id: 2, name: "bbb", description: "bbb", isPopular: true,…}
2: {id: 3, name: "ccc", description: "ccc", isPopular: false,…}
3: {id: 4, name: "ddd", description: "ddd", isPopular: true,…}
4: {id: 5, name: "aaa", description: "aaa", isPopular: false,…}
5: {id: 6, name: "ggg", description: "ggg", isPopular: false,…}

I would like to appear in an ng-select as:

Popular
bbb
ccc
The rest
aaa
ccc
ggg
hhh

So I've used

<select ng-selected="true"
    ng-options="category.name group by category.isPopular for category in ctrl.categories |
        orderBy: ['-isPopular','name']"
    ng-model="myModel.category">
</select>

However this is returning:

aaa
ccc
ggg
hhh
true
bbb
ccc

How I can label the groups and order by the group?


Solution

  • You need to pass in the name of the group to group by. For example:

    <select ng-selected="true"
        ng-options="category.name group by category.isPopular ? 'Popular' : 'The rest' for category in ctrl.categories |
            orderBy: ['-isPopular','name']"
        ng-model="myModel.category">
    </select>