dropdown-multiselect

https://github.com/ShuyunFF2E/ccms-components

by arzyu

HTML

<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://114.215.169.170:8080/dist/ccms-components.js"></script>
<link rel="stylesheet" href="http://114.215.169.170:8080/dist/ccms-components.css">
<div ng-controller="DemoCtrl as ctrl">
  <h1>下拉多选</h1>
  <div>
		<div class="demo">
			<div>当前值: <span ng-bind="ctrl.value1 | json"></span></div>
			<dropdown-multiselect
					placeholder="快，快选我。。啊！"
					model="ctrl.value1"
					datalist="ctrl.datalist1">
			</dropdown-multiselect>
		</div>
		<div class="demo">
			<div>当前值: <span ng-bind="ctrl.value2 | json"></span></div>
			<dropdown-multiselect
					placeholder="快，快选我。。啊！也可以搜索"
					model="ctrl.value2"
					datalist="ctrl.datalist2"
					searchable="true"
					confirm-button="true"
					mapping="ctrl.fieldsMap">
			</dropdown-multiselect>
		</div>
  </div>
</div>

SCSS

[ng-app] {
  margin: 1em;
  h1 {
    font-weight: normal;
    border-bottom: dashed 1px #ccc;
  }
  h1 + div {
    display: flex;
    .demo {
      flex: 1;
    }
  }
}

JavaScript

angular.module('demoApp', ['ccms.components'])
  .controller('DemoCtrl', function() {
    this.value1 = [];
    this.datalist1 = ['北京', '上海', '深圳', '广州'];

    this.value2 = ['xa', 'sh'];
    this.datalist2 = [
      {title: '北京', value: 'bj'},
      {title: '上海', value: 'sh'},
      {title: '深圳', value: 'sz'},
      {title: '西安', value: 'xa'},
      {title: '南京', value: 'nj'},
      {title: '武汉', value: 'wh'},
      {title: '重庆', value: 'cq'},
      {title: '广州', value: 'gz'}
    ];
    /*
    this.fieldsMap = {
      valueField: 'value',
      displayField: 'title'
    };
    */
  });