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

逝兮诚

发布于 2019-10-30 13:43:36

3.1K0

发布于 2019-10-30 13:43:36

文章被收录于专栏：代码人生

文档原文地址

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>

是控件的下拉部分。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/07/07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法