Angular中ui-select的使用

简介: Angular中ui-select的使用最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了。一、准备工作1.

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

 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。

相关文章
|
3月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
49 0
|
3月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
53 0
|
前端开发 UED
Angular中ui-grid的使用详解
Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理提出,当表格上下滚动时,表头固定,左右滚动时,表头随动。
3548 0
|
前端开发 JavaScript
Vue、React、Angular最佳UI框架
摘要: 今天我们不聊技术,只”以貌取人”。 image 前言 之前有很多刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue、React、Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩笑的说你觉得哪个好看就选择哪个呗。
1912 0
|
开发工具 git
Angular UI框架 Ng-alain @delon的脚手架的生成开发模板
前言 首先感谢下 cipchk基于 Ng-Zorror 框架上制作的ng-alain 。 ng-alain 之前很早就关注了 ng-alain,今天得空折腾了下。
1724 0
|
前端开发 JavaScript
Angular UI ngx-bootstrap 使用说明
序言:   ngx-bootstrap包含了由Angular提供支持的所有核心的Bootstrap组件。我们可以直接通过命令行安装后使用,同时使用该系列的组件不需要包含原始的JS组件。
1878 0
|
Web App开发 前端开发 UED
Angular Web 开发使用PrimeNG的UI组件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/78856190 PrimeNG官网:点击打开链接 加载 PrimeNG在npm上可用,如果现有的应用程序运行以下命令将其下载到项目。
1237 0
|
存储 JavaScript 前端开发
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute。 不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!! 于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧
1802 0
|
3月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
60 0
|
3月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
52 0