Simha Chalam Simha Chalam - 1 month ago 14
Android Question

how to active class is equal to true for multiple ng-repeats for up and down arrow keys?

.I completed auto complete search for single ng-repeat but my problem with listed items with multiple ng-repeat.

my html code is:

<section class="input-group" ng-controller="sidemenu">
<div class="input-group-btn srch-city-list">
<select ng-model="SelectCity" class="form-control"
ng-options="c as c.city_name for c in Citys" ng-change="changeCity()">
<img src="images/arrow.png" alt="Arrow"/>
<option value="">All Cities</option>
</select>
</div>
<div class="input-group" arrow-selector>
<input class="form-control" placeholder="Enter location, builder or project" ng-model="NodeId_1" autofocus ng-keyup="getValue($event.keyCode)" />
<div class="search-datalist" ng-if="showsearch">
<ul ng-if="resultOfBuldDet.length>0">
<span class="result-hd">Builders55</span>
<li ng-repeat="bud in resultOfBuldDet" ng-class="{active :$index == focusIndex}" ng-click="searchFilter(bud)"><i class="fa fa-map-marker"></i> {{bud.builders_name}}</li>
</ul>
<ul ng-if="resultOfPropDet.length>0">
<span class="result-hd">Properties22</span>
<li ng-repeat="prop in resultOfPropDet" ng-class="{active :$index == focusIndex}" ng-click="searchFilter(prop)"><i class="fa fa-map-marker"></i> {{prop.property_name}} ,{{prop.hp_city.city_name}},{{prop.hp_location.location_name}} </li>
</ul>
</div>
</section>


In this i have a multiple ng-repeats like resultOfBuldDet,resultOfPropDet,etc.

I follwed this link
https://code.ciphertrick.com/2015/03/15/change-row-selection-using-arrows-in-ng-repeat/


  1. Its working for fine but its for single ng-repeat.so how can handle
    this line ng-class="{active :$index == focusIndex}" for multiple ng-repeats



my dirctive code:

sidemenu.directive('arrowSelector',['$document',function($document){
return{
restrict:'A',
link:function(scope,elem,attrs,ctrl){
var elemFocus = false;
elem.on('mouseenter',function(){
elemFocus = true;
});
elem.on('mouseleave',function(){
elemFocus = false;
});
$document.bind('keydown',function(e){
if(elemFocus){
if(e.keyCode == 38){
console.log(scope.allLength);
console.log(scope.focusIndex);
if(scope.focusIndex == 0){
return;
}
scope.focusIndex--;
scope.$apply();
e.preventDefault();
}
if(e.keyCode == 40){
console.log(scope.allLength);
console.log(scope.focusIndex);
if(scope.focusIndex == scope.allLength){
scope.focusIndex=0;
return;
}
scope.focusIndex++;
console.log(scope.focusIndex);
scope.$apply();
e.preventDefault();
}
}
});
}
};
}]);


controller code :

sidemenu.controller('sidemenu', ['$scope', '$rootScope', 'menuBuildersServices', 'allCityServices',
'allCountryServices', 'allServices', '$location', '$uibModal',
'$routeParams', '$mdDialog', 'PropertyDetails', 'customVariables', '$mdSidenav',
function(a, b, m, c, d, e, l, u, r, v, h, cust, md) {

a.focusIndex=0;
if (key == 8 && a.NodeId_1.length <= 2) {
a.resultOfPropDet = "";
a.resultOfBuldDet = "";
a.resultOfLocaDet = "";
a.resultOfCityDet = "";
a.resultOfSubLocaDet = "";
}

if (a.NodeId_1.length > 2 && key!=13) {
e.searchList(a.NodeId_1).then(function(result) {
a.resultOfPropDet = result.data.resultOfPropDet;
a.resultOfBuldDet = result.data.resultOfBuldDet;
a.resultOfLocaDet = result.data.resultOfLocaDet;
a.resultOfCityDet = result.data.resultOfCityDet;
a.resultOfSubLocaDet = result.data.resultOfSubLocaDet;
a.showsearch = true;

a.allLength= (a.resultOfPropDet.length+a.resultOfBuldDet.length);

}, function(error) {

});
}
});


its working only for single ng-repeat .so how can i handle $index value according to multiple ng-repeats

Answer

replace this line

<li ng-repeat="prop in resultOfPropDet"  ng-class="{active :$index == focusIndex} ...

with

<li ng-repeat="prop in resultOfPropDet"  ng-class="{active :$index == (focusIndex-resultOfBuldDet.length) } ...

so focus index continue to the second list when it get bigger than the first list size.