本文共计430个文字，预计阅读时间需要2分钟。
plaintext指令说明：下拉搜索框使用方法：返回参数mySelector -- 返回对象myOptions -- 下拉框数据：{ 'id': '7', 'name': 'value1' }
directive
/**
* 指令：下拉搜索框
* 使用方法：
* 返回参数：mySelector --> 返回对象 myOptions --> 下拉框数据：{'id': '7', 'name': 'value1'}
*/
directiveModule.directive('selectSearch', function ($compile) {
return {
restrict: 'AE',
scope: {
myOptions: '=',
mySelector: '='
},
template:
' ' +
' ' +
'
',
link: function (scope) {
// 下拉框选项副本
scope.tempdatas = scope.myOptions;
// 选择框是否隐藏
scope.hidden = true;
// 文本框数据
scope.searchField = '';
// 将下拉选的数据值赋值给文本框
scope.change = function (value) {
scope.searchField = value.name;
// 返回给原控制器
scope.mySelector = value;
// 重新给下拉框赋值
scope.myOptions = scope.tempdatas;
scope.hidden = true;
};
scope.close = function () {
scope.myOptions = scope.tempdatas;
scope.hidden = true;
};
// 获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换
scope.changeKeyValue = function (value) {
// 临时下拉选副本
var newDate = [];
// 如果包含就添加
angular.forEach(scope.tempdatas, function (data, index, array) {
if (data.name.indexOf(value) >= 0) {
newDate.unshift(data);
}
});
// 用下拉选副本替换原来的数据
scope.myOptions = newDate;
// 下拉选展示
scope.hidden = false;
// 如果是空字符串则用初始变量副本做替换
if ('' === value) {
scope.myOptions = scope.tempdatas;
}
}
}
}
});
