JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<link rel="stylesheet" href="http://www.ngnice.com/showcase/views/select/multiple.css">
<link rel="stylesheet" href="http://www.ngnice.com/showcase/bower_components/bootstrap/dist/css/bootstrap.css">
<script src="http://www.ngnice.com/showcase/bower_components/underscore/underscore.js"></script>
<div ng-app="ngShowcaseApp">
<div class="dropdown custom-select" ng-controller="ctrl.select.multiple">
  <div class="input-group">
    <input type="text" class="form-control"/>
      <span class="input-group-addon" ng-click="vm.dropdown = !vm.dropdown"><i
          class="glyphicon glyphicon-chevron-down"></i></span>
  </div>
  <div class="dropdown-menu collapse" ng-class="{in: vm.dropdown}" ng-blur="vm.dropdown = false">
    <table class="table table-hover">
      <thead>
      <tr>
        <th></th>
        <th>名称</th>
        <th>所属省份</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="city in vm.cities" ng-click="city.checked = !city.checked">
        <td>
          <input type="checkbox" ng-checked="city.checked"/>
        </td>
        <td>
          <label>{{city.label}}</label>
        </td>
        <td>{{city.province}}</td>
      </tr>
      </tbody>
    </table>
    <div ng-repeat="select in vm.selection()">
      {{select}}
    </div>
    <div>
      <span class="btn btn-success" ng-click="vm.dropdown = false">确定</span>
    </div>
  </div>
</div>
<input type="text" placeholder="背景控件应该被正常遮盖"/>
<h4>选择结果：</h4>
<div ng-repeat="select in vm.selection()">
  {{select}}
</div>
</div>

JavaScript

'use strict';

angular.module('ngShowcaseApp', []).controller('ctrl.select.multiple', function ($scope) {
  var vm = $scope.vm = {};
  vm.cities = [
    {
      province: '北京',
      code: 'bj',
      label: '北京市'
    },
    {
      province: '上海',
      code: 'sh',
      label: '上海市'
    },
    {
      province: '广东',
      code: 'gz',
      label: '广州'
    },
    {
      province: '广东',
      code: 'sz',
      label: '深圳'
    }
  ];
  vm.selection = function() {
    return _.where(vm.cities, {checked: true});
  }
});