写这篇文章时,引用文章地址如下:
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.
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.
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,如下所示:
<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>
<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: "与其它优惠共享"}];
效果图如下: