Angular create select filter from another select

Question

I've found this answer here: https://stackoverflow.com/a/28357122/5459561

It works perfectly on Plunker, but when I implement it in my project, it doesn't work.

My HTML:

<div ng-controller="PolicyController as policy">
    <select multiple ng-model="proto" ng-init="proto=policy.protocols[0]"
    ng-options="protocol for protocol in policy.protocols"></select>
    <select multiple ng-model="fc" ng-options="function.code for function in
    policy.functions | filter:{protocol:proto}"></select>
</div>

My JS:

app.controller('PolicyController', ['$http', function($http){
    var policy = this;
    policy.functions = [{"code": 1, "protocol": "A"},{"code": 2, "protocol": "A"},{"code": 3, "protocol": "B"},{"code": 4, "protocol": "C"}];
    policy.protocols = ["A", "B", "C"];

Now the problem is when I click to change the current selected protocol, the codes disappear. But when I first initialize the page, I can see the codes for protocol A, which means the 'ng-init' is working properly.

NOTE: It does work in plunker as shown in the linked answer, but not in my project. I'm using angular V1.5.0, and the Plunker used 1.1.5. Though I don't believe it should make a difference.

Any ideas?

If it works in the plnkr, the mistake has to be somewhere else — Thomas, Dec 28 '15 at 09:44
Why do you have `multiple` on your selects? Do you really want to select multiple protocols, and multiple functions? If so, you'll have to use something else as a filter. — JB Nizet, Dec 28 '15 at 09:45

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

Your code works fine when you select only one protocol. But if you select multiple protocols, for example A and B, your $scope.proto variable contains the array [A,B] which messes up with your filtering.

The chosen answer on this question is the cleanest solution I can think of right now. Write a function that processes your first select's value array and returns true or false for second select based on that.

edited May 23 '17 at 11:52

Community

1
1

answered Dec 28 '15 at 09:53

Sina Gh

598
3
8

if you want to have multiple select (`proto ` would be an array ) you have to also change your `ng-init` like this `ng-init="proto=[policy.protocols[0]]"` which again illustrates the problem you have as @sina-gh mentions. – koox00 Dec 28 '15 at 10:01
You are right, the problem was that it was presented as an array. For some reason, it still worked here: http://plnkr.co/edit/uHDA7mrKoxgV0C2QgIN5?p=preview. What had to be done is to use | filter:{protocol:proto[0]} for single selected item. – Finkel Dec 28 '15 at 11:47
Why would you define a multiple select list if you don't want to actually filter by multiple selections? – Sina Gh Dec 28 '15 at 12:17
It was old code, I wrote it back when I thought that 'multiple' means to show multiple options instead of drop down select – Finkel Dec 28 '15 at 12:35
Well, my solution is valid when you actually want to filter by multiple fields as you select them, for example "only show functions that have protocol A or B". If that was not what you intended, my solution should not be the chosen answer since a simple `{protocol:proto[0]}` or even better changing the select list to a single choice list would be much easier. – Sina Gh Dec 28 '15 at 12:38
It actually solved it for me, as I now know how to filter by multiple values. Also I have switched to a single select after you told me that I receive an array – Finkel Dec 29 '15 at 15:32

Angular create select filter from another select

1 Answers1