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

2019-10-30 13:43:36 浏览数 (1)

文档原文地址

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模块

代码语言:javascript复制
var module = angular.module('myapp',['ui.select', 'ngSanitize']);

基本例子

html代码

代码语言:javascript复制
<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代码

代码语言:javascript复制
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 人点赞