AngularJS typeahead 添加自定义排序功能

Question

我正在尝试构建一个 typeahead，它应该获得指定数量的结果并按开头对它们进行排序。

这意味着如果我确实有以下值：阿拉巴马州、密苏里州、马里兰州、马萨诸塞州等，并在输入字段中键入 "m" 或 "M"，则顺序应为马里兰州、密苏里州、马萨诸塞州, 阿拉巴马州。

因此我的代码如下所示：

<input class="input-large" type="text" ng-model="selected" 
  typeahead="state for state in states | filter:$viewValue | limitTo:8">

我尝试添加自定义过滤功能：

<input class="input-large" type="text" ng-model="selected" 
  typeahead="state for state in states | filter:$viewValue | orderBy:orderByStartsWith()| limitTo:8">

具有以下功能：

$scope.orderByStartsWith = function() {
    return function(element){
        return element.toLowerCase().startsWith($scope.selected.toLowerCase()) ? 0 : 1;         
    }
};

这不起作用，因为范围值 selected 没有更新，如此 JSFiddle

所示

有什么办法可以得到想要的订单吗？

Answer 1

将 $viewValue 传递给您的 order by 函数并使用它对结果进行排序。

<input class="input-large" type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | orderBy:orderByStartsWith($viewValue) | limitTo:8">

 $scope.orderByStartsWith = function(viewValue) {
      return function(element){
        return element.toLowerCase().startsWith(viewValue.toLowerCase()) ? 0 : 1;           
      }
    };

检查 fiddle： http://jsfiddle.net/2umL5yqL/1/

AngularJS typeahead 添加自定义排序功能

AngularJS typeahead add custom sort by function

javascript

typeahead

angularjs

bootstrap-typeahead

angular-ui-bootstrap