AngularJS ng-repeat filter if class matches string

Question

I have two select fields, I need to filter options in second one based on the selection of the first one, I need to do this by class name. For example these are the select boxes:

<select ng-model="type">
    <option val="short">Short</option>
    <option val="long">Long</option>
</select>

<select>
    <option ng-repeat="item in items" ng-class="{'short': item.short, 'long:' item.long}">{{item.name}}</option>
</select>

The ng-repeat will generate this kind of HTML:

<select>
    <option class="short">Foo</option>
    <option class="short long">Bar</option>
    <option class="long">Foobar</option>
</select>

When you select short, it should show 'Foo' and 'Bar'. When you select long, it should show 'Foo' and 'Foobar'.

So I want to compare the {{type}} and the applied classnames, and show if one of the applied classnames match the {{type}}. How can I do this?

PLUNKER

Make the class names(short, long) proprieties of your item objects and then use filter. Filter works on the item not on the HTML you output it to. — Iansen, Aug 27 '14 at 09:03
Please provide a bit more info, this is confusing for me. Thanks. — Arko Elsenaar, Aug 27 '14 at 09:07
How does a item look like? Does it have a class propriety? If it doesn't ... just add one when creating, fetching the items. So an item object should have a propriety named class (or whatever you want)... and you use that propriety name in the filter. — Iansen, Aug 27 '14 at 09:11
As you can see in my example, the 'value' of the first options are matching the classnames in the second select field. So I just need to show the elements with the class names matching. Keep in mind that I am using ng-repeat on the second select field, so I just need the proper filter (I think) — Arko Elsenaar, Aug 27 '14 at 09:12
I have updated my question to give you a better view of my code and situation. — Arko Elsenaar, Aug 27 '14 at 09:24

score 1 · Accepted Answer · answered Aug 27 '14 at 09:55

1

I suggest to use ng-if if you just want filter out options. If item[type] returns false, hide it.

http://jsfiddle.net/68Lyz56x/1/

<div ng-app>
<div ng-controller="ctrl">
    <select ng-model="type">
        <option val="short">short</option>
        <option val="long">long</option>
    </select>
    <select>
        <option ng-repeat="item in items" ng-if="item[type]">{{item.name}}</option>
    </select>
</div>

function ctrl($scope) {

$scope.items = [{
    name: 'Foo',
    short: true,
    long: false
}, {
    name: 'Bar',
    short: true,
    long: true
}, {
    name: 'Foobar',
    short: false,
    long: true
}]
}

answered Aug 27 '14 at 09:55

Mark Ni

2,383
1
27
33

@ArkoElsenaar need change to lower cases http://plnkr.co/edit/Iy72rh5olpgOzaItXta2?p=preview – Mark Ni Aug 27 '14 at 10:03
Ah, I really need to do it by class name instead of text. Because the val will be 'short' or 'long' and the text will be something like 'Short time (<15 min)' and 'Long time (>15 min)'. – Arko Elsenaar Aug 27 '14 at 10:15
@ArkoElsenaar apparently you need set options programmingly if you want to bind the value instead of text with `ng-options` directive, here is a updated example: http://plnkr.co/edit/BjQMVBcQcyHgyspbbcuf?p=preview – Mark Ni Aug 27 '14 at 10:47
Why isnt there a way to just do this by comparing a string to a classname? Like jQuery's hasClass() – Arko Elsenaar Aug 27 '14 at 10:51
@ArkoElsenaar There is a hasClass(); but here is not the right place to use it, Angular prefer do everything with data models. Further reading if interested, good luck: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background – Mark Ni Aug 28 '14 at 03:19
Eventually used this solution and got it to work. Thank you for your time and input! – Arko Elsenaar Aug 28 '14 at 07:29

AngularJS ng-repeat filter if class matches string

PLUNKER

1 Answers1