github地址:https://github.com/angular-ui/ui-select

默认支持所有唯一性字段的匹配。可以配置只有一种。通过channelList | filter: {description: $select.search},或者通过自己对数据组装。


//异步获取渠道类型
	  	SalesService.getChannelList().then(function(data) {
			data.forEach(function(item){
				var obj = {};
				obj.id = item.id;
				obj.text = item.description;
				$scope.channelTypes.push(obj);
			});
		});


                ChannelService.queryUserList().then(function (res) {
				var data = res.data || [];
				for (var i = 0, len = data.length; i < len; i++) {
					var obj = {
						id: data[i].id,
						name: data[i].realName + ' ' + data[i].uid
					};
					$scope.userList.push(obj);
				}
			});

这样也可以组装出2个字段,3个字段,看业务需求。比如需要同时支持对realName和uid的匹配,可以拼接起来放到新的name字段中。


组件的使用: 

(1) Html中:


<div class="col-sm-2">
     <ui-select ng-init="search.tmpChannelId = channelList[0]" ng-model="search.tmpChannelId" uis-open-close="onOpenClose(isOpen)">
	 <ui-select-match placeholder="请选择渠道">
	    <span ng-bind="$select.selected.description"></span>
	</ui-select-match>
	<ui-select-choices repeat="channel in (channelList | filter: {description: $select.search}) track by $index">
	    <span ng-bind="channel.description"></span>
	</ui-select-choices>
	<ui-select-no-choice>
	     没有匹配的渠道
	</ui-select-no-choice>
     </ui-select>
</div>

ui-select: controller中绑定的被选定的数据

ui-select-match: 匹配到的数据,变色处理

ui-select-choices: 待选择的数据

ui-select-no-choice: 提示用户没有匹配的数据

filter: $select.search: 组件里面定义的过滤器


Controller中获取数据:

  1. $scope.channelList = [{ id: 0, description: '全部' }];  
  2.   
  3.         // 获取渠道列表  
  4.         function getChannelList() {  
  5.             FinalStatementService.channelList().then(function (res) {  
  6.                 var data = res.data;  
  7.                 $scope.channelList = $scope.channelList.concat(data);  
  8.             });  
  9.         }  
  10.         getChannelList();


 (2) 不使用组件filter中的单字段过滤:


  1. <div class="col-sm-3">  
  2.     <ui-select ng-model="search.type" uis-open-close="onOpenClose(isOpen)">  
  3.          <ui-select-match placeholder="请选择渠道">  
  4.               <span ng-bind="$select.selected.text"></span>  
  5.          </ui-select-match>  
  6.          <ui-select-choices repeat="channel in (channelTypes | filter: $select.search) track by $index">  
  7.               <span ng-bind="channel.text"></span>  
  8.          </ui-select-choices>  
  9.          <ui-select-no-choice>  
  10.               没有匹配的渠道  
  11.          </ui-select-no-choice>  
  12.      </ui-select>  
  13.  </div>


 自己对数据处理,得到除了ID之外,只包含description字段的匹配。


  1. $scope.channelTypes = [  
  2.             {id:0,text:'全部'}  
  3.         ];  
  4.   
  5.         //异步获取渠道类型  
  6.         SalesService.getChannelList().then(function(data) {  
  7.             data.forEach(function(item){  
  8.                 var obj = {};  
  9.                 obj.id = item.id;  
  10.                 obj.text = item.description;  
  11.                 $scope.channelTypes.push(obj);  
  12.             });  
  13.         });  
  14.   
  15.         //查询条件  
  16.         $scope.search = {  
  17.             type: $scope.channelTypes[0],  
  18.             skuId: '',  
  19.             startTime: '',  
  20.             endTime: ''  
  21.         };

效果:




备注:

ng-options="t.id as t.type for t intypes"   代表生成的option标签<option value="t.id"> t.type</option>

这个组件里面也可以这样:

<ui-select-choices repeat="channel.id as channel.description for chanel in (channelList | filter: $select.search) track by $index">
<span ng-bind="channel.description"></span>
</ui-select-choices>

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐