ui-select官方教程（一）——入门简介

￡神魔★判官ぃ 2022-06-13 13:22 253阅读 0赞

## 文档原文地址 ##

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 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关 Robot Framework官方教程（一）入门

1.1简介 Robot Framework是一个基于Python的，可扩展的关键字驱动的测试自动化框架，用于端到端验收测试和验收测试驱动开发（ATDD）。它可用于测试分布

系统管理员/ 2022年11月16日 10:39/ 0 赞/ 651 阅读

相关 ui-select官方教程（一）——入门简介

文档原文地址 https://github.com/angular-ui/ui-select/wiki 入门指南简介 ui-select是AngularJ

￡神魔★判官ぃ/ 2022年06月13日 13:22/ 0 赞/ 254 阅读

相关机器人仿真软件 V-REP 入门教程（一）简介

V-REP (Virtual Robot Experimentation Platform虚拟机器人实验平台) ![Center][] 机器人模拟器V-

我不是女神ヾ/ 2022年05月11日 00:14/ 0 赞/ 2469 阅读

相关 Spring框架入门教程（一）——框架简介

介绍 > Spring是一个分层的(一站式) 轻量级开源框架 > Spring的核心是控制反转（IoC）和面向切面（AOP）为什么说分层一站式呢？ > ja

阳光穿透心脏的1/2处/ 2022年04月18日 04:13/ 0 赞/ 414 阅读

相关 Python 官方文档：入门教程

https://pythoncaff.com/docs/tutorial/3.7.0 官方入门教程，从这里开始你的 Python 之旅，将长久维护 1. 基础信息

以你之姓@/ 2022年03月29日 02:09/ 0 赞/ 250 阅读

相关 Dropwizard官方教程（一）入门

转载：[https://www.jianshu.com/p/3bb308c9bbcb][https_www.jianshu.com_p_3bb308c9bbcb] 入门

Love The Way You Lie/ 2022年03月02日 14:52/ 0 赞/ 337 阅读

相关官方mycat安装入门教程

一.环境介绍 1.1. mysql节点1环境操作系统版本 : centos6.5 x64 数据库版本 : mysql-5.7.4 mycat版本

╰半橙微兮°/ 2022年02月14日 20:17/ 0 赞/ 285 阅读

相关 kettle 教程（一）：简介及入门

介绍 kettle 是纯 java 开发，开源的 ETL工具，用于数据库间的数据迁移。可以在 Linux、windows、unix 中运行。有图形界面，也有命令脚本还可以

我不是女神ヾ/ 2021年10月15日 06:41/ 0 赞/ 605 阅读

相关 CXF使用教程（一）——简介以及入门案例

一.简介 Apache CXF是一个开源的Service框架，可以用于简化用户的service开发，基于CXF开发的应用可提供SOAP、XML/HTTP、RESTFUL HT

绝地灬酷狼/ 2021年09月27日 23:36/ 0 赞/ 432 阅读

相关 CXF使用教程（一）——简介以及入门案例

一.简介 Apache CXF是一个开源的Service框架，可以用于简化用户的service开发，基于CXF开发的应用可提供SOAP、XML/HTTP、RESTFUL HT

电玩女神/ 2021年09月27日 23:36/ 0 赞/ 385 阅读