AngularJs MultiSelect组件

最新推荐文章于 2024-05-22 13:52:22 发布

weixin_34402408

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量737

点赞数

文章标签： javascript 数据结构与算法 python ViewUI

原文链接：https://my.oschina.net/u/2391658/blog/869099

版权

2019独角兽企业重金招聘Python工程师标准>>>

AngularJs MultiSelect 是一个纯AngularJS指令，用于创建多选或单选下拉菜单按纽。不需要jQuery，并且能够很好兼容其它 Javascript 库。

特性：

Pure AngularJS. Can be easily combined with other Javascript libraries such as jQuery, Twitter Bootstrap, etc
(With slight adjustments where necessary).
Multiple or single selection types
Use HTML & CSS in your button & checkbox labels
Unlimited nested grouping
Keyboard navigation support
Event callbacks available
Configurable
i18n. Easily translated to different languages.

下载：

https://github.com/isteven/angular-multi-select

使用方法及demo：

http://isteven.github.io/angular-multi-select/#/demo-minimum

基本配置：

HTML代码：

<div
    isteven-multi-select
    input-model="modernBrowsers"
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
>
</div>

controller数据结构：
$scope.modernBrowsers = [
 	{	icon: "[...]/opera.png...",	name: "Opera",	maker: "Opera Software",	ticked: false	}
 	{	icon: "[...]/internet_explorer.png...",	name: "Internet Explorer",	maker: "Microsoft",	ticked: false	}
 	{	icon: "[...]/firefox-icon.png...",	name: "Firefox",	maker: "Mozilla Foundation",	ticked: true	}
 	{	icon: "[...]/safari_browser.png...",	name: "Safari",	maker: "Apple",	ticked: false	}
 	{	icon: "[...]/chrome.png...",	name: "Chrome",	maker: "Google",	ticked: true	}
];

输出的数据结构：
$scope.outputBrowsers = [
 	{	icon: "[...]/firefox-icon.png...",	name: "Firefox",	maker: "Mozilla Foundation",	ticked: true	}
 	{	icon: "[...]/chrome.png...",	name: "Chrome",	maker: "Google",	ticked: true	}
];