what can I do if angularjs md-autocomplete clicks X many times and does not display a drop-down list (height:0)?
the method passed outside the instruction is called within the
selectedItemChange method
/**
*
* <md-autocomplete>
*
* // $scope.querySearch: "", //
* // $scope.searchTextChange: "", //
* // $scope.selectedItemChange: "", //
* // $scope.enterAccount: "", //
* <cf-accountitem
* ng-model="myVm.accountitemid"
* bind-key="id"
* name-key="longname"
* list-filter="{iscash : 1}"
* afterchange="afterchange(row)"
* is-group="true"
* only-leaf="true"
* poptitle="">
* </cf-accountitem>
*/
angular.module("cloudfi.gl").directive("cfAccountitem", cfAccountitemFn);
function cfAccountitemFn() {
"use strict";
return {
restrict: "AE",
template: [
"<div class="featureGlassBox autocompletedemoBasicUsage"> " +
" <span ng-if="!listLoad || !$parent.load" class="glassBoxLoad">...</span>" +
" <md-autocomplete ng-if="listLoad && $parent.load"" +
" md-search-text-change="searchTextChange(vm.searchText,vm)" " +
" md-selected-item="vm.selectedItem" " +
" md-search-text="vm.searchText" " +
" md-selected-item-change="selectedItemChange(item,vm)" " +
" md-items="item in querySearch(vm.searchText)" " +
" md-item-text="item.number+\" \"+item[nameKey]" " +
" md-min-length="0" " +
" selected-item="vm.selectedItem" " +
" md-no-cache="true" " +
" placeholder="{{placeholder}}" " +
" ng-disabled="disabled" " +
" title="{{vm.selectedItem.numAndName}}" " +
" md-clear-button="!(readonly) && !(disabled)" " +
" md-menu-class="mdACExtralClass" " +
" ng-keyup="enterAccount($event)"> " +
" <md-item-template> " +
" <span md-highlight-text="vm.searchText" md-highlight-flags="^i" title="{{item.numAndName}}">{{item.numAndName}}</span> " +
" </md-item-template> " +
" <md-not-found> " +
" "{{vm.searchText}}" " +
" </md-not-found> " +
" </md-autocomplete> " +
" <i class="featureGlass" ng-if="listLoad && !disabled" ng-show="!vm.searchText" ng-click="open($event,300,vm,$index)"></i> " +
"</div> "
].join(""),
scope: {
ngModel: "=",
bindKey: "@", // rowbindKeyngModel
nameKey: "@", // rownameKeyinput,longname
onlyLeaf: "=", // list
onlyCash: "=", // list
onlyBank: "=", // list
onlyHasAssit: "=", // list
onlyAc: "=", // list
cashOrBank: "@", // list
afterChange: "&", // row
afterSelect: "&", // input
disabled: "=", //
readonly: "=", //
isGroup: "@", //
poptitle: "@poptitle", //
cfClass: "@cfClass", // class
linkLevel: "=", //
linkNextAct: "=", // for:-
placeholder: "@", // input
},
controller: ["$scope", "$element", "$attrs", "$timeout", "$filter", "$uibModal", "dataStoreService", function ($scope, $element, $attrs, $timeout, $filter, $uibModal, dataStoreService) {
$scope.listLoad = false;
//
$scope.vm = {
searchText: "", // ,
selectedItem: "" //
};
//
var allList = [];
//
var list = [];
//
var itemtype = [];
init();
// :
// 1.
// 2.
function init(){
//
allList = $scope.isGroup ? dataStoreService.get("groupAccountitem") : dataStoreService.get("accountitem");
//
list = createList();
//
itemtype = dataStoreService.get("itemtype");
//
function createList() {
// 1.
if ($scope.onlyLeaf) {
list = [];
angular.forEach(allList, function (v) {
if (v.isLeaf == 1) {
this.push(v);
}
}, list);
} else {
list = angular.copy(allList);
}
// 2.
if ($scope.cashOrBank) {
list = list.filter(function(v){
return v.iscash == 1 || v.isbank== 1;
})
}
// 3.
if ($scope.onlyCash) {
list = list.filter(function(v){
return v.iscash == 1;
})
}
// 4.
if ($scope.onlyBank) {
list = list.filter(function(v){
return v.isbank == 1;
})
}
// 5.idlist
if ($scope.onlyHasAssit) {
list = list.filter(function(v){
return v.caaid;
})
}
// 5.list
if ($scope.onlyAc) {
list = list.filter(function(v){
return v.ac;
})
}
$scope.listLoad = true;
return list;
}
if($attrs.onlyCash){
$scope.$watch("onlyCash", function (newValue, oldValue, scope) {
createList();
});
}
if($attrs.onlyBank){
$scope.$watch("onlyBank", function (newValue, oldValue, scope) {
createList();
});
}
$scope.bindKey = $scope.bindKey || "id";
$scope.nameKey = $scope.nameKey || "longname";
}
//
$scope.querySearch = function (query) {
// input
var readonly = $($element).find("input").attr("readonly");
if(readonly == "readonly"){
return [];
}else{
return query ? list.filter(createFilterFor(query)) : list;
}
}
//
function createFilterFor(query) {
// `.` `
var noPointQuery = (query || "").replace(/\.|\s/g, "");
return function filterFn(state) {
// name
return (state.numAndName.replace(/\.|\s/g, "").indexOf(noPointQuery) > -1);
};
}
//
$scope.searchTextChange = function (searchText, info) {
$scope.vm.searchText = searchText;
innerChangeNgModel(null);
}
// ngModel
// row:
// modalSel:
function innerChangeNgModel(row,modalSel) {
if (row) {
if(($scope.ngModel != row[$scope.bindKey]) ){
//
$scope.ngModel = row[$scope.bindKey];
var copyRow = angular.copy(row);
if ($scope.afterChange && $scope.afterChange.constructor === Function) {
$scope.afterChange({
row: copyRow
});
}
//
if($attrs.linkLevel){
$scope.linkLevel = row.level;
}
//
if($attrs.linkNextAct){
if(!$scope.linkNextAct){
$scope.linkNextAct = row[$scope.bindKey];
}
}
}else{
console.log("")
}
} else {
if($scope.ngModel){
$scope.ngModel = "";
if ($scope.afterChange && $scope.afterChange.constructor === Function) {
$scope.afterChange({
row: null
});
}
}else{
console.log("")
}
}
if(modalSel){
if ($scope.afterSelect && $scope.afterSelect.constructor === Function) {
$scope.afterSelect({
dom: $($element).find("input")
});
}
}
}
//
$scope.selectedItemChange = function (selectedItem, info) {
innerChangeNgModel(selectedItem);
}
//
$scope.enterAccount = function (e) {
if (e.keyCode != 13 || !$scope.vm.searchText) {
return;
}
var result = $scope.querySearch($scope.vm.searchText);
if (result && result[0]) {
innerChangeNgModel(result[0]);
}
}
$scope.$watch("ngModel", function (newValue, oldValue, scope) {
ngModelUpdInner($scope.ngModel);
});
// ngModel
function ngModelUpdInner(val) {
if (val) {
var row = list.filter(function (v) {
return v[$scope.bindKey] == val;
});
if (row && row[0]) {
var copyRow = angular.copy(row[0]);
$scope.vm.selectedItem = copyRow;
}else{
$scope.vm.selectedItem = null;
$scope.vm.searchText = val;
}
} else {
$scope.vm.selectedItem = null;
$scope.vm.searchText = "";
}
}
//
$scope.open = function () {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: "js/directive/common/cfAccountitem/cfAccountitemModal.html",
controller: "cfAccountitemModalCtrl",
resolve: {
poptitle: function () {
if ($scope.poptitle) {
return $scope.poptitle;
}
},
fullList: function () {
return list;
}
}
});
modalInstance.result.then(function (row) {
if (row) {
$scope.vm.selectedItem = row;
innerChangeNgModel(row,"modalSel");
}
}, function () {
console.log(("Modal dismissed at: " + new Date()));
});
}
}]
}
}