1
Meine JSON-Daten ist dies die von der Datenbank kommt und ich es von Objekt zu JSON.So konvertiert die Werte sind wie folgt:Filtering Liste leer
[{
"StoreName": "Flipkart"
}, {
"StoreName": "Amazon"
}, {
"StoreName": "Snapdeal"
}, {
"StoreName": "Jabong"
}, {
"StoreName": "Trendin"
}, {
"StoreName": "Lenskart"
}, {
"StoreName": "Zovi"
}, {
"StoreName": "BabyOye"
}, {
"StoreName": "ShopMore24"
}, {
"StoreName": "BasicsLife"
}, {
"StoreName": "PrettySecrets"
}, {
"StoreName": "American Swan"
}, {
"StoreName": "ShopClues"
}, {
"StoreName": "FernsNPetals"
}, {
"StoreName": "Pepperfry"
}, {
"StoreName": "Koovs"
}, {
"StoreName": "FoodPanda"
}, {
"StoreName": "BookmyFlower"
}, {
"StoreName": "Printvenue"
}, {
"StoreName": "Amar Chitra Katha"
}, {
"StoreName": "Booking"
}, {
"StoreName": "TicketGoose"
}, {
"StoreName": "Myntra"
}, {
"StoreName": "FirstCry"
}, {
"StoreName": "Archies Online"
}, {
"StoreName": "Dominos"
}, {
"StoreName": "Bewakoof"
}, {
"StoreName": "Healthkart"
}, {
"StoreName": "Zivame"
}]
und mein Code für Winkel js ist dies:
angular.module('app', [])
.controller('Controller', function($scope,$filter) {
$scope.obj = {};
$scope.obj.showList = false;
$scope.Getallitem = function() {
$scope.Store = angular.toJson(data)
}
$scope.Getallitem();
$scope.SelectedValue = function(item) {
$scope.obj.showList = false;
$scope.obj.sname = item;
}
$scope.open = function(index) {
var filteredContent = $filter('filter')($scope.Store,$scope.obj.sname);
if(typeof filteredContent[index] !== 'undefined'){
var StoreName = filteredContent[index];
$scope.SelectedValue(StoreName);
}
}
$scope.focusIndex = -1;
$scope.keys = [];
$scope.keys.push({
code: 13,
action: function() {
$scope.open($scope.focusIndex);
}
});
$scope.keys.push({
code: 38,
action: function() {
$scope.focusIndex--;
}
});
$scope.keys.push({
code: 40,
action: function() {
$scope.focusIndex++;
}
});
$scope.$watch('obj.sname', function() {
if(!$scope.obj.showList){
$scope.focusIndex = -1;
}
});
$scope.$on('keydown', function(msg, obj) {
var code = obj.code;
if(code != 40 && code != 38 && code != 13){
$scope.obj.showList = true;
}
var filteredContent = $filter('filter')($scope.Store,$scope.obj.sname);
$scope.keys.forEach(function(o) {
if (o.code !== code) {
return;
}
if(code == 40){
if (($scope.focusIndex + 1) >= filteredContent.length) {
return;
}
}else if(code == 38){
if ($scope.focusIndex <= 0) {
return;
}
}
o.action();
$scope.$apply();
});
});
})
.directive('keyTrap', function() {
return function(scope, elem) {
elem.bind('keydown', function(event) {
if(event.keyCode == 40 || event.keyCode == 38 || event.keyCode == 13){
event.preventDefault();
}
scope.$broadcast('keydown', {
code: event.keyCode
});
});
};
});
und Code für HTML ist dies:
<body ng-app="app" key-trap>
<div ng-controller="Controller">
<input type="text" class="myInput form-control" name="txtStorename" id="txtStorename" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName" ng-model="obj.sname">
<ul ng-if="obj.sname && obj.showList" id="myUL" ng-repeat="StoreList in Store| filter:obj.sname">
<li class="record" ng-class="($index == focusIndex)?'record-highlight':''" ng-cloak ng-click="SelectedValue(StoreList.StoreName)">{{StoreList.StoreName}}</li>
</ul>
<div ng-show="(Store|filter:obj.sname).length==0" style="color:red;font-weight:bold" ng-cloak>No Result Found</div>
</div>
</body>
Das Problem hier ist, ich nur kein Datensatz gefunden div bekommen. Die Liste wird als null für ng-repeat angezeigt. Es gibt also keine Liste, wenn ich filtere.