我正在为下拉菜单创建预输入。我使用了 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 页面中没有任何内容。请告诉我如何实现下拉菜单的预输入。还有什么办法吗。 我不应该使用jquery
您可以在输入框上使用 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 下拉菜单的文档此处
我建议使用 select2
这个链接将使您学习如何从头开始使用它
初学者选择2
这个链接会让你明白为什么要使用它 看看吧 select2 的示例
Angular 团队在
ui.bootstraphttps://angular-ui.github.io/bootstrap/。 搜索“Typeahead”部分。
他们提供示例代码。安装说明位于 他们的 github