Search code examples
angularjsangular-ui-bootstraptypeahead

angularJS + UI bootstrap typeahead: filter:$viewValue doesn't work

I don't manage to get the filter:$viewValue work in an input with typeahead. I get the whole list displayed with the entered characters highlighted. I expect a filtered list depending on the characters entered.

Here is a plunker: http://plnkr.co/edit/X3C0fP52ZTi55LJtXfnu?p=preview

In my real project, I need to apply two filters as below.

<input autocomplete="off" 
  type="text" 
  placeholder="Selected Criteria"     
  ng-model="MgtCtrl.editActionData.selectedCriteria" 
  typeahead='criteria as criteria.name for criteria in MgtCtrl.criteriaList | criteriaByApplication:MgtCtrl.getTriggerApplication() | filter:$viewValue | orderBy:"name"'>
Solution

  • If your collection item is an object, then you need to specify which property the filter should take into account.

    As per your example, the filter would look like this:

    | filter:{'name':$viewValue}

    Since you're displaying the name property, it may be the name you want to filter by, but I may be wrong. So you need to adequate it with your context.

    References: https://docs.angularjs.org/api/ng/filter/filter