AngularJS进阶(五)Angular实现下拉菜单多选

分享一下我老师大神的人工智能教程!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

Angular实现下拉菜单多选

写这篇文章时,引用文章地址如下:

http://ngmodules.org/modules/angularjs-dropdown-multiselect

http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

AngularJS Dropdown Multiselect

This directive gives you a Bootstrap Dropdown with the power of AngularJS directives.

Features

Based on Bootstrap's dropdown.

jQuery is not necessary.

Seperated your data and the selection data. no modification to the data made.

Built-in search.

Complete control on the selected items model to fit it to your requirements.

Two view options: normal list and checkboxes.

Pre-selected values.

Limit selection count.

Grouping items by property.

Callback events.

Demo

http://dotansimha.github.io/angularjs-dropdown-multiselect/

Dependencies

required: AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0

Make sure to add the dependencies before the directive's js file.

Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file.

Install

Download the files

Using bower:

Just run bower install angularjs-dropdown-multiselect

Manually: You can download the .js file directly or clone this repository.

Include the file in your app

<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>.

You can also use the minfined version (angularjs-dropdown-multiselect.min.js).

Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect

Usage and Documentation

See the documentation and examples in the GitHub pages: http://dotansimha.github.io/angularjs-dropdown-multiselect/

由以上英文文档可以得知,若使用angularjs-dropdown-multiselect,首先需要在index.html中引入AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0,如下所示:

<script src="js/angularjs-dropdown-multiselect.js"></script>

<script src="js/lodash.min.js"></script>

并在app.js模块中添加依赖angularjs-dropdown-multiselect如下所示:

var routerApp = angular.module('routerApp', ['ui.router''ngCookies''ngTable''angularjs-dropdown-multiselect''MedListModule']);

yh_set_dtl.html核心代码如下:

<div style="float:left">优 惠 类 型:</div>

<!-- Demo -->

<div ng-dropdown-multiselect="" 

 options="yhctlModelOptions" 

 selected-model="yhctlModel"

 checkboxes="true">

</div>

controllers.js代码如下:

 $scope.yhctlModel = [];

 $scope.yhctlModelOptions = [ 

                              {id: 1, label: '限定用户'}, 

                              {id: 2, label: "限定商家"}, 

                              {id: 3, label: "限定使用次数"},

                              {id: 4, label: "限定药品"}, 

                              {id: 5, label: "与其它优惠共享"}];

效果图如下:

 

这里写图片描述

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

猜你喜欢

转载自blog.csdn.net/mm2zzyzzp/article/details/83239173
今日推荐