ui-select官方教程(一)——入门简介

文档原文地址

https://github.com/angular-ui/ui-select/wiki

入门指南

简介

ui-select是AngularJS官方制作的下拉框插件,和AngularJS搭配使用,效果很好。

要求

Angular >=1.2.18

ngSanitize module添加

jQuery(旧版浏览器支持可选)

Bootstrap (v3)/Select2/Selectize CSS适当引用

浏览器兼容性版本在Internet Explorer 8和火狐3.6以上。

引入文件

select.js

select.css

在你的appliction的modules中包含ui-select、ngSanitize模块

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

基本例子

html代码

<ui-select ng-model="selected.value">
   <ui-select-match>
       <span ng-bind="$select.selected.name">
            </span>
   </ui-select-match>
   <ui-select-choices repeat="item in (itemArray | filter:$select.search) track by item.id">
       <span ng-bind="item.name">
           </span>
   </ui-select-choices>
</ui-select>

Js代码

angular.module('app').controller('ctrl',['$scope', function($scope) {
         $scope.itemArray= [{ id: 1, name: 'first' },
                   {id: 2, name: 'second' },
                   {id: 3, name: 'third' },
                   {id: 4, name: 'fourth' },
                   {id: 5, name: 'fifth' }];
   $scope.selected = { value: $scope.itemArray[0] };
}]);

代码含义

<ui-select>

ui-select是控件的主标签,它包含数据绑定和空间的基本设置。

<ui-select-match>

是控件的选中显示,通过”$select.selected”可以拿到选中的对象

<ui-select-choices>

是控件的下拉部分。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户1082659的专栏

Angular React Vue我应该选择什么?

为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博...

4710
来自专栏用户4822892的专栏

Modern Web Development, Design and Deployment

Modern web development, design and deployment can be effectively described as ev...

6310
来自专栏代码人生

AngularJS系列(一)——常用指令

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

6810
来自专栏代码人生

AngularJS系列(二)——作用域和控制器

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

5920
来自专栏CSDN技术头条

前端 MVVM 模式中的数据层(Model)实战应用

当今时代,React、Vue、AngularJS 三大框架横行,我们很难争论出哪个是最好的框架,但三者共同点是 MVVM 的模式,用一张简单的图可以看到,MVV...

14230
来自专栏代码人生

AngularJS系列(十一)——路由和复制

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

9220
来自专栏代码人生

AngularJS系列(四)——服务

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

8020
来自专栏代码人生

AngularJS-tree教程

AngularJS-tree是AngularJS官方出品的tree控件,它与AngularJS无缝组合、且方便实用。AngularJS-tree的github官...

9320
来自专栏我的前端路

可能是你见过的最完善的微前端解决方案

技术栈无关:主框架不限制接入应用的技术栈,子应用具备完全自主权 独立开发、独立部署:子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 独立运行...

14500

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励