一、angular下拉框-ui-select
我曾经写的一个指令,效果如图
<ui-select ng-model="cityObj.city" theme="selectize" ng-change="changeCityFunction()" name="cityFullName" ng-disabled="isDisabled">
<ui-select-match placeholder="请选择">{{$select.selected.jiupiCityFullName}}</ui-select-match>
<ui-select-choices repeat="item in allCityList | filter: {jiupiCityFullName:$select.search}">
<div ng-bind-html="item.jiupiCityFullName | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
(function () {
'use strict';
var jiupiCityFullNameModule = angular.module("jiupiCityFullNameModule",[]);
jiupiCityFullNameModule.directive("jiupiCityFullNameSelect",[function(){
return {
restrict:'E',
scope:{
cityObj : "=",
isRequired:'=',
isDisabled:'=',
isHideSelect : '=',
changeCityFunction :'=',
},
templateUrl:"../static/jiupiCityFullNameSelect/jiupiCityFullNameSelect.html",
controller:["$scope","$http",function($scope,$http){
$scope.getCityList = function(){
$http.get('bizwebcontrol/jiupicityfullname/findAllJiupiCityList').success(function(data){
if(data.result=="success"){
$scope.allCityList = data.list;
if(!$scope.isHideSelect){
$scope.allCityList.unshift({"id":"","jiupiCityFullName":"请选择"});
}
//默认选中
if($scope.cityObj && $scope.cityObj.city && $scope.cityObj.city.id){
angular.forEach($scope.allCityList,function(item){
if(item.id == $scope.cityObj.city.id){
$scope.cityObj.city = item ;
}
})
}
}
})
};
$scope.getCityList();
}]
}
}])
}());
二、layui,angular:
layui-select指令效果如下
在输入框中输入匹配下拉列表的数据,点击关闭按钮关闭下拉框
关键代码,
1、首先引入angular.js(1.x)和angular-sanitize.js文件
2、在主module中注入ngSanitize,var app = angular.module("myApp", ['ngSanitize']);
scriptApp.filter("highlight", function($sce, $log){
var fn = function(text, search){
if (!search) {
return $sce.trustAsHtml(text);
}
text = encodeURI(text);
search = encodeURI(search);
var regex = new RegExp(search, 'gi')
var result = text.replace(regex, '<span class="highlightedText">$&</span>');
result = decodeURI(result);
return $sce.trustAsHtml(result);
};
return fn;
})
.directive('layuiSelect',function () {
return {
restrict: 'AE',
replace: true,
template:'<div class="layui-input-block layui-unselect layui-form-select layui-form-selected">\n' +
' <span class="deleteClass" data-ng-click="deleteList()"><i class="layui-icon">ဇ</i></span>' +
'<input type="text" ng-model="inputName" id="inputClass" placeholder="请输入" class="layui-input"/>\n' +
' <dl class="layui-anim layui-anim-upbit" style="">\n' +
' <dd lay-value="" ng-repeat="item in microList | filter:inputName" data-ng-click="clickSelect(item)">' +
'<div ng-bind-html="item[keyName] | highlight: inputName"></div> </dd>\n' +
' </dl>\n' +
' </div>',
scope:{
voList:'=',//列表数据
keyName:'@',//
triFun:'&',
chooseItem:'=',//选择的item
},
controller:function ($scope) {
$scope.keyName = $scope.keyName?$scope.keyName:'name';
$scope.microList = $scope.voList;
$(document).click(function () {
$('.layui-form-selected dl').hide();
});
$('.layui-form-selected dl').hide();
$('.deleteClass').hide();
//下拉框点击选择
$scope.clickSelect = function(item) {
$scope.inputName = item[$scope.keyName];
$scope.chooseItem = item;
$('.layui-form-selected dl').hide();
$('.deleteClass').show();
};
// 点击输入框
$('#inputClass').click(function (e) {
event.stopPropagation();//阻止事件冒泡
$('.layui-form-selected dl').show();
});
// 点击图标删除
$scope.deleteList = function () {
$scope.inputName = '';
// $('.deleteClass').hide();
$('.layui-form-selected dl').show();
};
//监听inputName
$scope.$watch('inputName',function (newValue,oldValue) {
if(!newValue){
$('.deleteClass').hide();
}else{
$('.deleteClass').show();
}
});
//回调返回选择的对象
$scope.$watch('chooseItem',function (newValue,oldValue) {
if(newValue != oldValue){
$scope.triFun();
}
})
}
}
})
相关css样式(仅供参考)
.deleteClass{
position: absolute;
right:0;
top:7px;
cursor: pointer;
}
.deleteClass .layui-icon{
font-size:26px;
color: #929090;
}
.highlightedText{
font-weight: 600;
}
使用指令
<div class="layui-form-item" style="width:60%;">
<label class="layui-form-label">选择版本号</label>
<layui-select ng-if="vo.dataModalList" vo-list="vo.microList" key-name="name"
tri-fun="triFun()" choose-item="vo.chooseItem"></layui-select>
</div>
其中voList,keyName,传入对应数组的值
$scope.vo.dataModalList=[
{key:0,value:'zzz'},
{key:1,value:'zxc'},
{key:2,value:'zdf'},
{key:3,value:'aaa'}
];
//下拉列表选择后触发
$scope.triFun=function () {
console.log($scope.vo.chooseItem);//打印的是选择的item
}