Filter out values dynamically from a select using angular js

Question

I have a select where I am populating certain values as below:

The values are:

     $scope.obj = {codes: [
        {code: 1},
        {code: 2},
        {code: 3}
     ]};

Now I want to filter certain values dynamically without making any changes in the $scope.obj value i.e. I don't want to display the {code:1} value. I have set this value in another $scope variable:

$scope.selectedCode = {code:1};

Whatever values is present in selected code should not be displayed in the select drop down. I think this can be done using angular js filter expression:

<select ng-options="c.code for c in obj.codes | filter:'c.code !== selectedCode .code'" ng-model="selected">

But the above is displaying an empty drop down.

Any help/guidance is most welcome.Thanks in advance. :)

There is a typo in your code snippet. You have 'filer' instead of 'filter'. Is that your actual snippet? — Brett DeWoody
– Brett DeWoody, Commented Jan 4, 2015 at 6:51

dfsq · Accepted Answer · 2015-01-04 08:15:19Z

7

Create helper method in controller:

$scope.filterCodes = function(obj) {
    return obj.code !== $scope.selectedCode.code;
};

and use it as custom filter:

<select ng-options="c.code for c in obj.codes | filter:filterCodes" ng-model="selected"></select>

UPD. There is also pure template solution without controller function:

ng-options="c.code for c in obj.codes | filter: '!' + selectedCode.code"

edited Jan 4, 2015 at 8:15

answered Jan 4, 2015 at 6:54

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

Jyotirmoy Pan Over a year ago

Worked like charm. Thanks a million. :)

dfsq Over a year ago

In template you can do it like this: ng-options="c.code for c in obj.codes | filter: '!' + selectedCode.code". But personally I find it more comprehensive to have filtering in controller and keep templates as simple as possible.

LegionDev Over a year ago

I looked everywhere for something like this !! thanks a million !!

oyaebunterkrah Over a year ago

You've just saved my day

Mehmet Otkun · Accepted Answer · 2015-01-04 09:22:17Z

0

Tyr to create a new object which filtered.

<select ng-options="c.code for c in filteredobj = (obj.codes | filter:'code':'!'+ selectedCode.code)" ng-model="selected">

edited Jan 4, 2015 at 9:22

answered Jan 4, 2015 at 6:53

Mehmet Otkun

1,3949 silver badges24 bronze badges

1 Comment

Jyotirmoy Pan Over a year ago

Sorry but your answer ain't working. In fact the select is not displaying any values.

Collectives™ on Stack Overflow

Filter out values dynamically from a select using angular js

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related