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://www.cnblogs.com/le220/p/8670349.html

二、使用方法

1.首先依次引入所需要的文件

注意引入的先后顺序

2.html代码

 <ui-select ng-model="$parent.test" theme="bootstrap" style="min-width: 300px;" name="oldTest" ng-change="testChange()">

             <ui-select-match placeholder="请选择用户名">{{$select.selected.name}}</ui-select-match>

             <ui-select-choices repeat="s in testArr| propsFilter: {name: $select.search, id: $select.search}">

                <div ng-bind-html="s.name | highlight: $select.search"></div>

             </ui-select-choices>

          </ui-select>

ui-select-match  匹配所输或所选项在文本框展示

ui-select-choices  下拉列表的展示

ng-bind-html  绑定用户所选择的项，以高亮状态展示

3.js代码(demo2.js)

 /**
  * Created by Administrator on 2018/6/22.
  */
 'use strict';

 var app = angular.module('demo', ['ngSanitize', 'ui.select']);

 app.filter('propsFilter', function() {
     return function(items, props) {
         var out = [];

         if (angular.isArray(items)) {
             var keys = Object.keys(props);

             items.forEach(function(item) {
                 var itemMatches = false;

                 for (var i = 0; i < keys.length; i++) {
                     var prop = keys[i];
                     var text = props[prop].toLowerCase();
                     if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                         itemMatches = true;
                         break;
                     }
                 }

                 if (itemMatches) {
                     out.push(item);
                 }
             });
         } else {
             out = items;
         }

         return out;
     };
 });

 app.controller('DemoCtrl', ['$scope',function($scope){
     $scope.test = {};
     $scope.testArr = [
         {
             id: 1,
             name: "乐乐"
         },
         {
             id: 2,
             name: "博博"
         },
         {
             id: 3,
             name: "淘淘"
         }
     ];

     $scope.testChange = function () {
         console.log($scope.testSelect);

     }
 }
 ]);

4.实现效果

    

当然ui-select不止这一种用法，还有许多意想不到的功能。本实例和其他功能实现在github：https://github.com/lela520/angular-ui-select。