dropdown-select

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

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="https://npmcdn.com/ccms-components/ccms-components.min.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/ccms-components/ccms-components.min.css">
<div ng-controller="DemoCtrl as ctrl">
  <h1>下拉单选</h1>
  <div>
    <div class="demo">
      <div>当前值: <span ng-bind="ctrl.value1 | json"></span></div>
      <dropdown-select
          placeholder="哈哈哈"
          model="ctrl.value1"
          datalist="ctrl.datalist1">
      </dropdown-select>
    </div>
    <div class="demo">
      <div>当前值: <span ng-bind="ctrl.value2 | json"></span></div>
      <dropdown-select
          placeholder="快快选我！可以搜索！"
          model="ctrl.value2"
          datalist="ctrl.datalist2"
          searchable="true"
          mapping="ctrl.fieldsMap">
      </dropdown-select>
      <div style="margin: 0.5em 0;">
        <input style="width: 50%;" ng-model="newValue">
        <button class="btn-ok" ng-click="ctrl.setValue(newValue)">设置新值</button>
      </div>
    </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';
    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'}
    ];
    // 这个默认的字段 mapping
    /*
    this.fieldsMap = {
      valueField: 'value',
      displayField: 'title'
    };
    */
    this.setValue = function(newValue) {
      this.value2 = newValue;
    };
  });