AngularJS实现下拉菜单多选

举报
SHQ5785 发表于 2023/05/02 17:19:59 2023/05/02
【摘要】 写这篇文章时,引用文章地址如下:http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJS Dropdown MultiselectThis directive gives you a Boot...

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

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

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: 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: "与其它优惠共享"}];

效果图如下:

 

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。