Question

我正在使用Angular UI-Bootstrap的typeahead

<input type="text" name="recipient" id="recipient" placeholder="Friend's name or username"
 autofocus="autofocus"
 class="form-control"
 ng-model="payment.recipient"
 typeahead="friend.username for friend in friends | filter:$viewValue | limitTo:4"
 typeahead-template-url="typeaheadTemplate.html"
 typeahead-editable="false"
 ng-required="true"/>

每个Friend对象具有以下结构：

{
    name: friendship.name,
    username: friendship.username,
    picture: friendship.picture // Url
}

允许用户按照图片搜索（这是头像的网址）并没有成功修改过滤器是没有意义的。

我尝试了什么：

typeahead="friend.username for friend in friends| filter:{username:username, name:name} | filter:$viewValue | limitTo:4"
typeahead="friend.username for friend in friends | filter:{username:$viewValue, name:$viewValue} | limitTo:4"

在过滤器表达式上使用$viewValue两次似乎打破了它...任何想法？

Answer 1

试试这个：

typeahead="friend.username for friend in myFilterFunc($viewValue) | limitTo:4"

并在您的控制器中：

$scope.myFilterFunc = function(viewValue) {
  var filteredFriends = [];
  angular.forEach($scope.friends, function(friend) {
    if ((friend.username.indexOf(viewValue) > -1) || 
       (friend.name.indexOf(viewValue) > -1)) 
       {
         filteredFriends.push(friend);
       }
  });
  return filteredFriends;
};

Angular UI Bootstrap Typeahead ignore字段

1 个答案: