Spring进阶(一):Springmvc常用注解标签详解(spring springmvc常用注解)
751
2022-05-29
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
.
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,如下所示:
并在app.js模块中添加依赖angularjs-dropdown-multiselect。如下所示:
var routerApp = angular.module('routerApp', ['ui.router', 'ngCookies', 'ngTable', 'angularjs-dropdown-multiselect', 'MedListModule']);
yh_set_dtl.html核心代码如下:
options="yhctlModelOptions"
selected-model="yhctlModel"
checkboxes="true">
controllers.js代码如下:
$scope.yhctlModel = [];
$scope.yhctlModelOptions = [
{id: 1, label: '限定用户'},
{id: 2, label: "限定商家"},
{id: 3, label: "限定使用次数"},
{id: 4, label: "限定药品"},
{id: 5, label: "与其它优惠共享"}];
效果图如下:
Angular AngularJS
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。