angular多选可搜索组件

作者:frank 发表日期:2015-08-21 12:13:10 更新日期:2016-08-15 20:02:17 分类:猿文色

摘要

基于angular material的可搜索多选控件。

正文

配置如下:

angular
  .module('demoWan', [
    'ngMaterial',
    'fc.dateRange',
    'fc.wanSelect'
  ]).controller('DemoCtrl', DemoCtrl);

function DemoCtrl($scope) {
  $scope.startDate = "2015-07-07";
  $scope.endDate = "2015-07-27";
  $scope.dateLength = 0;

  $scope.sourceData = ["中国", "日本", "蒙古", "北韩", "朝鲜", "韩国", "缅甸", "文莱", "柬埔寨", "东帝汶", "印度尼西亚", "寮国", "老挝", "马来西亚", "菲律宾", "新加坡", "泰国", "越南"];
  $scope.selectedData = [];

  $scope.selectChanged = function(){
    jQuery("#wan-selected-data").html($scope.selectedData.join(','));
  };
}

HTML文件如下:

<wan-select placeholder="国家:" 
            source-data="sourceData" 
            selected-data="selectedData" 
            select-changed="selectChanged()">
</wan-select>

Options:

placeholder: string
source-data: array,源数据
selected-data: array,选中的数据
select-changed: 事件,选中的Array改变时触发

DEMO