0
Answer

Filter in angularjs

Asad Kapadia

Asad Kapadia
7y
187
1
This is my html code.
  1. <body ng-app="app" key-trap>  
  2. <div ng-controller="Controller">  
  3. <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">  
  4. <ul ng-if="obj.sname && obj.showList" id="myUL" ng-repeat="StoreList in Store| filter:obj.sname">  
  5. <li class="record" ng-class="($index == focusIndex)?'record-highlight':''" ng-cloak ng-click="SelectedValue(StoreList.StoreName)">{{StoreList.StoreName}}</li>  
  6. </ul>  
  7. <div ng-show="(Store|filter:obj.sname).length==0" style="color:red;font-weight:bold" ng-cloak>No Result Found</div>  
  8. </div>
And this is my Angular JS code.
  1. <script>  
  2. angular.module('app', [])  
  3. .controller('Controller', function ($scope, $http, $filter) {  
  4. $scope.obj = {};  
  5. $scope.obj.showList = false;  
  6. $scope.Getallitem = function () {  
  7. $http.get('/Coupons/GetStore').success(function (data) {  
  8. $scope.Store = data;  
  9. });  
  10. }  
  11. $scope.Getallitem();  
  12. $scope.SelectedValue = function (item) {  
  13. $scope.obj.showList = false;  
  14. $scope.obj.sname = item;  
  15. }  
  16. $scope.open = function (index) {  
  17. var filteredContent = $filter('filter')($scope.Store, $scope.obj.sname);  
  18. if (typeof filteredContent[index] !== 'undefined') {  
  19. var StoreName = filteredContent[index];  
  20. $scope.SelectedValue(StoreName);  
  21. }  
  22. }  
  23. $scope.focusIndex = -1;  
  24. $scope.keys = [];  
  25. $scope.keys.push({  
  26. code: 13,  
  27. action: function () {  
  28. $scope.open($scope.focusIndex);  
  29. }  
  30. });  
  31. $scope.keys.push({  
  32. code: 38,  
  33. action: function () {  
  34. $scope.focusIndex--;  
  35. }  
  36. });  
  37. $scope.keys.push({  
  38. code: 40,  
  39. action: function () {  
  40. $scope.focusIndex++;  
  41. }  
  42. });  
  43. $scope.$watch('obj.sname', function () {  
  44. if (!$scope.obj.showList) {  
  45. $scope.focusIndex = -1;  
  46. }  
  47. });  
  48. $scope.$on('keydown', function (msg, obj) {  
  49. var code = obj.code;  
  50. if (code != 40 && code != 38 && code != 13) {  
  51. $scope.obj.showList = true;  
  52. }  
  53. var filteredContent = $filter('filter')($scope.Store, $scope.obj.sname);  
  54. $scope.keys.forEach(function (o) {  
  55. if (o.code !== code) {  
  56. return;  
  57. }  
  58. if (code == 40) {  
  59. if (($scope.focusIndex + 1) >= filteredContent.length) {  
  60. return;  
  61. }  
  62. } else if (code == 38) {  
  63. if ($scope.focusIndex <= 0) {  
  64. return;  
  65. }  
  66. }  
  67. o.action();  
  68. $scope.$apply();  
  69. });  
  70. });  
  71. })  
  72. .directive('keyTrap', function () {  
  73. return function (scope, elem) {  
  74. elem.bind('keydown', function (event) {  
  75. if (event.keyCode == 40 || event.keyCode == 38 || event.keyCode == 13) {  
  76. event.preventDefault();  
  77. }  
  78. scope.$broadcast('keydown', {  
  79. code: event.keyCode  
  80. });  
  81. });  
  82. };  
  83. });  
  84. </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]
Next Recommended Forum