winform多选下拉列表_多选下拉列表

① 定义下拉框样式：

<div class="col-lg-12">
     <div class="white-box">
          <div class="row form-horizontal mar-b-5"><div class="col-md-12">
               <div class="form-group">
                    <label class="col-md-1 control-label">
                            <!-- 支付产品 -->
                            {{'Spaprd.MANUORDERDIF_PAYITEMCOLON' | translate}}
                     </label>
                     <div class="col-md-10">
                         <select inactive name="payProductList" 
                                ng-model="searchCondition.payProductList"
                                class="select2-multiple chosen-select form-control"
                                multiple tabindex="6">
                             <option value="{{item}}" 
                                 ng-repeat="item in reasonproutList track by $index">
                                 {{item}}
                             </option> 
                         </select> 
                      </div>
                </div>
           </div>
      </div>
</div>

② 引用js：

define(function (require) {
 var app = require('app');
 require('assets/js/select2.full.min.js');
 app.controller('testCtrl', ['$scope', '$http','$filter', 'arafMessage',  '$timeout',
 function ($scope, $http, $filter, arafMessage,  $timeout) {
            $timeout(function () {
                $(".select2-multiple").select2({});
            });
            // 重置时记得清除
            $scope.resetSearch = function() {
                $scope.searchCondition.payProductList = [];
		$timeout(function() {
                    $(".select2-multiple").select2({});
		});
            };
            ......    ......   ......
        }])
});

③ 响应函数：

// 查询所有支付产品
 $scope.reasonproutList = '';
 $scope.loadingPromise = $http.get("https://zhuanlan.zhihu.com/p/100203594")
     .then(function (msg) {
        if (msg.data.errorCode == '0') {
            if (msg.data.payload != null) {
                 $scope.reasonproutList = msg.data.payload;
            }
        }
 },function (res) { arafMessage.alert(config.errorMessage + res.status, "error"); });

④ 实现效果：