angular-ui-select 下拉框支持过滤单选多选解决方案（系列一）
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>
备注：当你觉得你的需求还是没有满足的时候，建议你还是再刷一遍例子，文档
为啥会选择它呢，因为它就是满足了我的所有需求啊
我想这篇文章，不仅仅是想记录下来我做项目时遇到问题，查找资料，解决问题的过程。
我希望它可以在帮我解决问题的同时也能够帮助解决你们遇到的问题。
