TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Asad Kapadia
NA
3
778
Filter in angularjs
Nov 15 2017 3:06 AM
This is my html code.
<
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
>
And this is my Angular JS code.
<script>
angular.module(
'app'
, [])
.controller(
'Controller'
,
function
($scope, $http, $filter) {
$scope.obj = {};
$scope.obj.showList =
false
;
$scope.Getallitem =
function
() {
$http.get(
'/Coupons/GetStore'
).success(
function
(data) {
$scope.Store = 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
});
});
};
});
</script>
Everything in the code is fine. I'm getting data from database in angularjs using $scope.GetallItem Function.
Problem is when I filter using the keyboard it filters well. As I use the enter key from keyboard to select it returns me as [Object object] instead of data value. I want is that on pressing enter key it gets me the value instead of [Object object]
Reply
Answers (
2
)
Calling different apps
File Upload :saving file in our Visual code under one Folder