2

我正在尝试在 ui bootstrap ( http://angular-ui.github.io/bootstrap/ ) 中使用 typeahead 来为现有选项添加下拉菜单。我希望用户始终可以选择一个显示“+ add new”的 li（参见示例代码）。

你知道我如何添加一个总是在 li 列表顶部的 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>
4

2 回答 2

4

您可以通过在 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">
于 2014-10-01T10:46:43.547 回答
0

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

主要思想是，在显示结果之前，你处理你的Array结果和unshift()你自己的价值。您可以修改该值并插入一些特殊值作为add new值。

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

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

希望，对你有用。

于 2014-09-05T11:07:31.420 回答