Custom filters in angularJS expressions -


i want custom filter within .tpl.html file using angularjs.

following case,

controller:

$scope.selectedfruits = [{'name': 'mango', 'color': 'yellow'}];  $scope.favouritefruits = [{'name': 'cherry', 'color': 'red'},                            {'name': 'papaya', 'color': 'yellow'}];  $scope.fruits = [{'name': 'apple', 'color': 'red'},                   {'name': 'mango', 'color': 'yellow'},                   {'name': 'guava', 'color': 'green'},                  {'name': 'grape', 'color': 'black'},                  {'name': 'cherry', 'color': 'red'},                   {'name': 'papaya', 'color': 'yellow'},                  {'name': 'orange', 'color': 'orange'}]; 

template

<select name="fruit" class="form-control"          ng-model="model.selectedfruits"          ng-options="fruit fruit.name                      fruit in filteredfruits)"/> </select> 

where filteredfruits should filtered this:

filteredfruits = (fruits not in (selectedfruits , favouritefruits))  

how can achieve above case?

you can use angular's built in filter filter.

from docs:

$filter('filter')(array, expression, comparator)

expression can function returns true items should included, in controller:

$scope.filterfunction = (fruit)->   (fruit not in (selectedfruits , favouritefruits)) 

then template:

<select name="fruit"          class="form-control"          ng-model="model.selectedfruits"          ng-options="fruit fruit.name                      fruit in fruits | filter:filterfunction)"/> 

plunker demo here


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

android - Keyboard hides my half of edit-text and button below it even in scroll view -

css - Make div keyboard-scrollable in jQuery Mobile? -