0

I'm working on this dynamic filter system using AngularJs and trying to figure out how to convert the color and size options to be in two dropdowns (one for each category).

I've tried the following code which does successfully add the dropdown along with the options in the select box, but upon click of one of the options, it doesn't select it.

<md-select ng-model="filter[cat][value]" placeholder="val" multiple>
  <md-option ng-repeat="value in getItems(cat, data)" ng-value="{{value}}" ng-init="filter[cat]={}">
    {{value}}
  </md-option>
</md-select>

Demo: https://codepen.io/mikelkel/pen/rwQKRm (Above code had been removed from this demo.)

falinsky
  • 7,229
  • 3
  • 32
  • 56
Mikel
  • 117
  • 11

2 Answers2

1

There are a few issues:

According to the documentation, multiple is a boolean so it needs to be multiple="true".

value in ng-model doesn't exist in that scope since it only exists in md-option, so you can't do filter[cat][value]. If you look at the documentation for md-select you will see that when using multiple the model is an array. So if you set your ng-model to simply filter[cat] then its value will be something like ["red","yellow"].

You can then modify filterByPropertiesMatchingAND so that it does a string match against like properties (so if the shirt color is red and the filter.color array contains red then you would return true).

I forked your codepen (https://codepen.io/czema/pen/KqbpPE) and made the following changes:

Even though ng-init is frowned upon I left it, but I initialized the filter[cat] to an array rather than an object.

I removed the md-item.

I set ng-model to filter[cat] and multiple="true"

In the Javascript I modified your filterByPropertiesMatchingAND function. Now it expects $scope.filter contain arrays for each property (rather than an object with color names and boolean values). I dropped the noSubFilter function.

Chet
  • 3,461
  • 1
  • 19
  • 24
0

Use ng-options in select rather than ng-repeat on the option tag. The syntax for ng-options is a little odd, but it would be something like this in your case: ng-options="value for value in getItems(cat, data)"

Read the documentation for ngOption https://docs.angularjs.org/api/ng/directive/ngOptions

As far as why your attempt above doesn't work, probably has something to do with the ng-init, which is being executed for each option and is probably wiping out any existing data. Don't use ng-init.

Chet
  • 3,461
  • 1
  • 19
  • 24
  • Thank you! I'll look further into your suggestion and referenced documentation. – Mikel Jul 11 '17 at 00:31
  • Hi @Chet, I've tried many variations of modifying the md-select to get it to work, but am having no luck. The demo linked above has my last attempt at including the md-select. Would you mind explain further or provide a working example? – Mikel Jul 11 '17 at 15:21
  • I mistook md-select for a regular select, so my answer is really completely wrong. I'm going to add another answer that might help better. – Chet Jul 11 '17 at 15:35