AngularJs MultiSelect组件

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...",ticked: true	}
 	{	icon: "[...]/chrome.png...",ticked: true	}
];

效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!