angular-ui-select2的使用方法

2017-05-11

主要介绍了angular-ui-select2的使用方法由于angular插件说明在网上很少方便以后在用的时候查询

参考网址： https://www.npmjs.com/package/angular-ui-select2

安装方式

bower安装

1	$ bower install angular-ui-select2

js、css引用方式

<link rel="stylesheet" href="bower_components/select2/select2.css">
<script  src="bower_components/jquery/jquery.js"></script>
<script  src="bower_components/select2/select2.js"></script>
<script  src="bower_components/angular/angular.js"></script>
<script  src="bower_components/angular-ui-select2/src/select2.js"></script>

select2模块作为一个依赖于你的应用程序模块

1	var App = angular.module('MyApp', ['ui.select2']);

代码示例

//注意 <option value=""></option>必须有否则 data-placeholder="请选择"无效

<select data-placeholder="请选择"class="inp"ui-select2="groupSetup"
 ng-model="screening" >

    <option value=""></option>
    <option ng-repeat="screening in investigationData"value="{{screening.id}}">
    {{screening.text}}</option>

</select>
<div class="selectTit ist" ng-click="screeningFun()" >
    <span class="l_i istleftBg "><i class="i_s i_b1"></i></span>
    <span class="r_t istrightBg" >一键排查</span>
</div>

js代码
ng-model=”screening” 数据绑定

$scope.screeningFun = function() {
    //判断数据绑定下拉框是否为空
    // $scope.screening = 1;下拉框默认数据（id）
    //清空下拉框数据 $scope.screening = ''

    if($scope.screening == null || $scope.screening == ''){
          alert('请选择数据')
     }else{
          //Do something
     }
}

//选择处置方式下拉框数据
   $http({
       url:'https//map',//mock模拟数据
       method :'GET',
   }).success(function(data,state,headers,config){
       $scope.investigationData = data.selectData_one;
   }).error(function(data){
       console.log('数据获取失败');
   });
//select2下拉款的默认信息
   $scope.groupSetup = {
       //multiple: true,//是否多选下拉框
       formatSearching: '请输入...',
       formatNoMatches: '没有该数据'
   };

数据格式

[
       {"text": "AHA切换", "id": 0},
       {"text": "CICS节点隔离", "id": 1},
       {"text": "DDCS节点隔离", "id": 2},
       {"text": "D0CS节点隔离", "id": 3},
       {"text": "CICS节点隔离", "id": 4},
       {"text": "DDCS节点隔离", "id": 5},
       {"text": "D0CS节点隔离", "id": 6},
       {"text": "CICS节点隔离", "id": 7},
       {"text": "DDCS节点隔离", "id": 8},
       {"text": "D0CS节点隔离", "id": 9}
]