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。

Angular中ui-select的使用的更多相关文章

  1. angular中ui calendar的一些使用心得

    ui calendar是封装fullcalendar的一款angular指令插件 官方地址:http://angular-ui.github.io/ui-calendar/ fullcalendar ...

  2. 开始学习Angular Mobile UI

    介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...

  3. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  4. angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...

  5. angular中复制文字到剪切板

    function copyToClipboard(oElement, value) { var aux = document.createElement("input"); if ...

  6. 阿里云 Angular 2 UI框架 NG-ZORRO介绍

    说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...

  7. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  8. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  9. Angular中ui-grid的使用详解

    Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...

随机推荐

  1. CSS快速入门-定位布局(九宫格)

    实现效果图: 看上去是不是很屌的样子?其实实现起来主要就是用到了一个float,不难. 实现步骤:1.新建一个大div,300*30002.里面放5个小div,100*1003.将div定位

  2. LINUX系统下跑分测试脚本:unixbench.sh

    linux 系统跑分测试脚本:     一.下载脚本:        wget http://teddysun.com/wp-content/uploads/unixbench.sh 二.更改权限:  ...

  3. 一个IT男的表白

    致BCD6 CEC0 C3F4 转一轮肩胛骨 倒一杯铁观音 白驹过隙,倏忽两秋 远方有希望和梦想 有火车.微信美颜视频聊天和碧根果 有你的支持 如果身旁没有你 生活无趣失去动力 就像python失去类 ...

  4. 32bit 天堂2 windows 2000 server架设教程

    服务器的软件要求: Microsoft Windows 2000 Server or advanced Server license 100 Microsoft SQL Server 2000 Ent ...

  5. 在IIS中部署Asp.Net网站

    在IIS中部署Asp.Net网站 1.添加IIS或者删除IIS,在控制面板=>程序和功能=>打开或关闭功能 启动iis,右键计算机=>管理=>服务和应用程序=>Inter ...

  6. 机器人平台框架Yarp - Yet another robot platform

    简介 ROS有强大和易用的特性,用的人很多,目前已经推出2.0版本,有相关的官网和论坛.然而其缺点也比较明显. 只能基于Ubuntu系统,且一个ROS版本只能对应一个具体的Ubuntu版本    通信 ...

  7. c++文件对齐

    头文件#include <iomanip> 关键词:setw(n),std::left,std::right 实例:输出一个0-4的12*12方阵,要求数字宽度为4,居左对齐,右下角输出出 ...

  8. webpack开发和生产两个环境的配置详解

    一开始在接触webpack 的时候,简直痛不欲生,现在回头看,做个注释,当然参考了很多文章.这是一个关于vue 开发的webpack 架构会列举出来webpack 系列教程Webpack——令人困惑的 ...

  9. maven:新建的maven工程需要添加一下插件

    //下面的代码是改变maven的默认使用Java版本,本机是jdk1.7所以用1.7<plugins> <plugin> <groupId>org.apache.m ...

  10. No.1010_第七次团队会议

    渺茫的前景 今天大家都很失望,一来昨天的问题还是继续存在着,仍然没有完成.二来,我们看了一下其余几个组的界面,对自己有些难过. 我们组确实存在人手少的问题,这几天我还因为挑战杯的事情缺席了两天,感觉内 ...