Angular中ui-select的使用
Angular中ui-select的使用
最近工作一直很忙，没有时间整理知识，前几天项目中需要用到angular-ui-select，实现下拉框快速过滤效果，今天有时间研究了一下，终于搞明白了。
一、准备工作
1.安装依赖包
（1）Angular --- V1.4.9
（2）Angular-sanitize --- V1.2.28
（3）Angular-ui-select --- V0.12.1
（4）Bootstrap --- V3.3.6
如果有需要再引入jQuery
注意: Angular-sanitize所依赖的Angular最低版本，Angular-ui-select所依赖的Angular和Angular-sanitize最低版本，只有依赖的版本符合要求，才能实现功能，否则会报错。
如果项目中用到的Angular版本比较低时，请安装低版本的Angular-sanitize和Angular-ui-select，这样，避免低版本不支持的情况。
2.安装方法：
使用npm进行安装
npm install Angular-sanitize@1.2.28 --save -dev
@+版本号表示安装指定版本的包文件，如果不加版本号，默认安装最新的版本。
如：npm install Angular-sanitize --save -dev
如果对npm不了解的话，可以参考：https://cloud.tencent.com/developer/article/1333204
二、使用方法
1.首先依次引入所需要的文件
注意引入的先后顺序
2.html代码
1 <ui-select ng-model="$parent.test" theme="bootstrap" style="min-width: 300px;" name="oldTest" ng-change="testChange()">
2
3 <ui-select-match placeholder="请选择用户名">{{$select.selected.name}}</ui-select-match>
4
5 <ui-select-choices repeat="s in testArr| propsFilter: {name: $select.search, id: $select.search}">
6
7 <div ng-bind-html="s.name | highlight: $select.search"></div>
8
9 </ui-select-choices>
10
11 </ui-select>ui-select-match 匹配所输或所选项在文本框展示
ui-select-choices 下拉列表的展示
ng-bind-html 绑定用户所选择的项，以高亮状态展示
3.js代码(demo2.js)
1 /**
2 * Created by Administrator on 2018/6/22.
3 */
4 'use strict';
5
6 var app = angular.module('demo', ['ngSanitize', 'ui.select']);
7
8 app.filter('propsFilter', function() {
9 return function(items, props) {
10 var out = [];
11
12 if (angular.isArray(items)) {
13 var keys = Object.keys(props);
14
15 items.forEach(function(item) {
16 var itemMatches = false;
17
18 for (var i = 0; i < keys.length; i++) {
19 var prop = keys[i];
20 var text = props[prop].toLowerCase();
21 if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
22 itemMatches = true;
23 break;
24 }
25 }
26
27 if (itemMatches) {
28 out.push(item);
29 }
30 });
31 } else {
32 out = items;
33 }
34
35 return out;
36 };
37 });
38
39 app.controller('DemoCtrl', ['$scope',function($scope){
40 $scope.test = {};
41 $scope.testArr = [
42 {
43 id: 1,
44 name: "乐乐"
45 },
46 {
47 id: 2,
48 name: "博博"
49 },
50 {
51 id: 3,
52 name: "淘淘"
53 }
54 ];
55
56
57 $scope.testChange = function () {
58 console.log($scope.testSelect);
59
60 }
61 }
62 ]);4.实现效果
当然ui-select不止这一种用法，还有许多意想不到的功能。本实例和其他功能实现在github：https://github.com/lela520/angular-ui-select。