angular-ui-select
官方文檔：github地址：https://github.com/angular-ui/ui-select
請大家多看文檔
首先注意版本的問題，如果版本不對應，是會報非常多意想不到的錯誤 的。
一：演示功能：支持下拉單選過濾。效果如下圖：
栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet"> </head> <body> <div> <div ng-app="app" ng-controller="ctrl"> <ui-select ng-model="selected.value"> <ui-select-match> <span ng-bind="$select.selected.name"> {{$select.selected.name}}</span> </ui-select-match> <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id"> <span ng-bind="item.name"></span> </ui-select-choices> </ui-select> {{selected.value}} </div> </div> <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js"></script> <script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js"></script> <script> angular.module('app', ['ui.select', 'ngSanitize']) .controller('ctrl', ['$scope', function ($scope) { $scope.itemArray = [ { id: 1, name: 'first' }, { id: 2, name: 'second' }, { id: 3, name: 'third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }, ]; $scope.selected = { value: $scope.itemArray[2] }; }]); </script> </body> </html>
適用場景：適用於第一次就把數據請求回來的場景，並且還適用於固定的幾個下拉選項。
多選的時候，注意兩個點：
1.multiple
2.
<ui-select ng-model="selected.value " multiple > <ui-select-match> <span ng-bind="$item.name"> </span> </ui-select-match> <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id"> <span ng-bind="item.name"></span> </ui-select-choices> </ui-select>
二：支持下拉多選過濾，效果展示：
完整代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet"> </head> <body> <div> <div ng-app="app" ng-controller="ctrl"> <ui-select ng-model="selected.value " multiple > <ui-select-match> <span ng-bind="$item.name"> </span> </ui-select-match> <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id"> <span ng-bind="item.name"></span> </ui-select-choices> </ui-select> {{selected.value}} </div> </div> <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js"></script> <script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js"></script> <script> angular.module('app', ['ui.select', 'ngSanitize']) .controller('ctrl', ['$scope', function ($scope) { $scope.itemArray = [ { id: 1, name: 'first' }, { id: 2, name: 'second' }, { id: 3, name: 'third' }, { id: 4, name: 'fourth' }, { id: 5, name: 'fifth' }, ]; $scope.selected = { value: $scope.itemArray[2] }; }]); </script> </body> </html>
備注：當你覺得你的需求還是沒有滿足的時候，建議你還是再刷一遍例子，文檔
為啥會選擇它呢，因為它就是滿足了我的所有需求啊
我想這篇文章，不僅僅是想記錄下來我做項目時遇到問題，查找資料，解決問題的過程。
我希望它可以在幫我解決問題的同時也能夠幫助解決你們遇到的問題。