CODEWITHSUNDEEP
angularjsangularjs-filter
user3407039
user3407039

Reputation: 1335

AngularJS: Filter with ng-options

I am able to use filters on my options when filtering the entire object, but I only want the filter apply to the name property, which I can't get working. The below results in no changes to what is displayed in the select regardless of anything being typed in the input. I have based this on the answer found here - Use filter on ng-options to change the value displayed

<input type="search" class="form-control" placeholder="Filter user groups" results="0" ng-model="searchText" />

<select class="form-control"
        size="8"
        multiple
        ng-model="UserGroupsSelected"
        ng-options="userGroup.Id as (userGroup.Name | filter:searchText) for userGroup in AvailableUserGroups" >

However, the filter does work if I have this - 

ng-options="userGroup.Id as userGroup.Name for userGroup in AvailableUserGroups | filter:searchText"

The issue being that I don't want to filter by the entire object or else you can get seemingly random and unwanted results coming up.

Upvotes: 1

Views: 3424

Answers (2)

Pierre Maoui
Pierre Maoui

Reputation: 6384

You can create your own filter this way : 

AvailableUserGroups|byNameInSearchText:searchText

with this declaration : 

myapp.filter('byNameInSearchText', function() {
    return function(availableUserGroups,textName) {
        if (typeof textName !== "undefined" && textName !== null) {
           return availableUserGroups.filter(function(u) {
                return (u.Name != null) && u.Name.indexOf(textName) !== -1;
            });
        }
        else return availableUserGroups;
    };
});

Upvotes: 0

kTT
kTT

Reputation: 1350

You can specify filter as a object which parameter name equals search field. For your purpose try to put searchText.Name as a model for search text. It should filter object just by "Name".

<input type="search" class="form-control" placeholder="Filter user groups" results="0" ng-model="searchText.Name" />

<select class="form-control"
        size="8"
        multiple
        ng-model="UserGroupsSelected"
        ng-options="userGroup.Id as userGroup.Name for userGroup in AvailableUserGroups | filter:searchText">

Upvotes: 5

Related Questions