如何使用angular ui bootstrap始终在typeahead中显示top li

Question

我正在尝试在ui bootstrap（http://angular-ui.github.io/bootstrap/）中使用typeahead为现有选项添加下拉列表。我希望用户始终可以选择一个说“＆＃34; +添加新＆＃34; （参见示例代码）。

你知道如何添加总是在列表顶部的li吗？

我想在下拉列表中显示的内容：

<input value="">
<ul>
  <li>+ Add New</li>
  <li>Boots</li>
  <li>Shoes</li>
  <li>Hats</li>
</ul>

有角度的html和指令

<div class="row form-group" ng-app="filterSelect">
  <div class="col-xs-4">
    <label for="">State:</label>
      <div class="btn-group s-search-filter">
        <span class="s-search-input" ng-controller="TypeaheadCtrl">
          <input type="text" ng-model="selected" placeholder="Search" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
        </span>
      </div>
    </div>
  </div>
</div>

<script charset="utf-8">
  angular.module('filterSelect', ['ui.bootstrap']);
  function TypeaheadCtrl($scope, $http) {

    $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

  }
</script>

Answer 1

您可以通过在angularjs中实现自定义过滤器来实现此目的。

autocompleteApp.filter('statesFilter', function() {
    return function(states, searchText) {
        var filtered = ['+ Add New'];
        searchText = searchText.toLowerCase();
        angular.forEach(states, function(state) {
            if (state.toLowerCase().indexOf(searchText) != -1)
                filtered.push(state);
        });
        return filtered;
    };
});

这里是html

<input type="text" 
 ng-model="selected" 
 placeholder="Search" 
 typeahead="state for state in states | statesFilter:$viewValue | limitTo:8" 
 class="form-control">

Answer 2

实际上据我所知你不能这样做。 一旦有类似的问题：我必须在所有结果之前显示我的输入文本。所以，我在typeahead指令上编写了自己的指令。不幸的是，我没有完成那个，但你可以尝试修改那个。

主要想法是，在显示结果之前，您需要处理Array个jf结果和unshift()自己的值。您可以修改那个并为add new值插入一些特殊值。

此外，这些指令仅适用于Arrays of Objects。

以下是链接：http://plnkr.co/edit/DKi5ONvNFtXPonwOHqtX?p=info

希望，它对你有用。