Question

我正在为下拉列表创建输入。我用了angularjs-typeahead-dropdown.min。但它不起作用。以下是我的代码

    <head>
        <script src="src/angular.min.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="Typeahead.js"></script>
        <script src="src/angularjs-typeahead-dropdown.min.js"></script>
        <title></title>
    </head>
<div class="container">
      <typeahead-dropdown id="ex1" ng-model="ex1model" options="ex1data" config="ex1config"></typeahead-dropdown>
    </div>

在js文件中

$scope.ex1model = [];
    $scope.ex1data = [{ id: 1, label: "Tony" },
               { id: 2, label: "Larita" },
               { id: 3, label: "Brian" },
               { id: 4, label: "Andrew" },
               { id: 5, label: "Bruno" },
               { id: 6, label: "Adrian" },
               { id: 7, label: "Stuart" },
               { id: 8, label: "Stephen" },
               { id: 9, label: "Peter" },
               { id: 10, label: "Alexander" }];
    $scope.ex1config = { modelLabel: "id", optionLabel: "label" };

这不起作用。 html页面中没有任何内容。请告诉我如何为下拉列表实现typeahead。还有别的办法吗？ 我不应该使用jquery

Answer 1

我建议使用select2
这个链接将让你学习如何从头开始使用它 select2 for beginner

这个链接会让你意识到为什么要使用它看看吧 Examples for select2

Answer 2

您可以在输入框中使用UI Bootstrap的Dropdown，如下所示

<div uib-dropdown> <input type="text" ng-model="searchKey" uib-dropdown-toggle> <ul uib-dropdown-menu> <li ng-repeat="data in ex1data | filter:searchKey"> {{data.label}} </li> </ul> </div>

查看UI Bootstrap下拉列表here

的文档

下拉列表的Typeahead实现

2 个答案: