前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular中ui-select的使用

Angular中ui-select的使用

作者头像
半指温柔乐
发布2018-09-11 09:23:27
3K0
发布2018-09-11 09:23:27
举报
文章被收录于专栏:前端知识分享

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代码

代码语言:javascript
复制
 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)

代码语言:javascript
复制
 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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Angular中ui-select的使用
    • 一、准备工作
      • 1.安装依赖包
      • 2.安装方法:
    • 二、使用方法
      • 1.首先依次引入所需要的文件
      • 2.html代码
      • 3.js代码(demo2.js)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档