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
– Thomas, Commented Dec 28, 2015 at 9: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
– JB Nizet, Commented Dec 28, 2015 at 9:45

Community · Accepted Answer · 2017-05-23 11:52:02Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 28, 2015 at 9:53

Sina Gh

5983 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

koox00 Over a year ago

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.

Finkel Over a year ago

You are right, the problem was that it was presented as an array. For some reason, it still worked here: plnkr.co/edit/uHDA7mrKoxgV0C2QgIN5?p=preview. What had to be done is to use | filter:{protocol:proto[0]} for single selected item.

Sina Gh Over a year ago

Why would you define a multiple select list if you don't want to actually filter by multiple selections?

Finkel Over a year ago

It was old code, I wrote it back when I thought that 'multiple' means to show multiple options instead of drop down select

Sina Gh Over a year ago

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.

|

Collectives™ on Stack Overflow

Angular create select filter from another select

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related