Filtering in Angular JS

Question

I want to create a filter in angular JS . My list comes from database as CouponsOperationResult objResult = ViewBag.StoreList; and there are 74 store names in this list. i want a filter where there is an input textbox.first thing is the list shows up down filter accordingly. second thing is it should only show up when there is a key up event. third thing it should filter accordingly with the value in the textbox and fourth is that on click on list it should populate value in textbox.

Layout = "~/Views/Shared/_LayoutCoupons.cshtml"; CouponsOperationResult objResult = ViewBag.StoreList;

//List <Store> objStoreList = objResult.Storelist;

int ListCount = objResult.Storelist.Count();
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link rel="stylesheet" href="~/content/css/coupons.css">
</head>

<body>
    <section class="section panel">

        <h2 class="no-margin-top">Submit your Coupon:</h2>

        <div class="panel-body">

            <form class="form" id="SubmitCoupon" name="SubmitCoupon" method="post">




                <div ng-app="StoreApp" ng-controller="Store">
                    <div class="col-md-11">
                        <div class="form-row">
                            <h4>STORENAME: </h4> <input type="text" ng-keyup="getkeys($event)"  class="myInput form-control" name="txtStorename" id="txtStorename" ng-model="test" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName">
                        </div>



                                <ul id="myUL">
                                    <li ng-repeat="x in StoreName | filter:test">
                                        {{ x }}
                                    </li>
                                </ul>


                        </div>
                    </div>

        </div>

    </section>


    <script>
        angular.module('StoreApp', []).controller('Store', function ($scope) {

            $scope.StoreName = [
                    'Flipkart',
                    'Amazon',
                    'Snapdeal',
                    'Jabong',
                    'Trendin',
                    'Lenskart',
                    'Zovi',
                    'BabyOye',
                    'ShopMore24',
                    'BasicsLife',
                    'PrettySecrets',
                    'American Swan',
                    'ShopClues',
                    'FernsNPetals',
                    'Pepperfry',
                    'Koovs',
                    'FoodPanda',
                    'BookmyFlower',
                    'Printvenue',
                    'Amar Chitra Katha',
                    'Booking',
                    'TicketGoose',
                    'Myntra',
                    'FirstCry',
                    'Archies Online',
                    'Dominos',
                    'Bewakoof',
                    'Healthkart',
                    'Zivame',
                    'eBay',
                    'Paytm',
                    'Surat Diamond',
                    'Groupon',
                    'indiatimes',
                    'Yatra Hotels',
                    'Thomas Cook Hotels',
                    'FabFurnish',
                    'VistaPrint',
                    'KFC',
                    'Mobikwik',
                    'JustEat',
                    'Candere',
                    'Eureka Forbes',
                    'Simplilearn',
                    'Thomas Cook Flights',
                    'Nord51',
                    'ClickSense',
                    'The Mobile Store',
                    'MakeMyTripHotels',
                    'Expedia',
                    'HomeShop18',
                    'StarCJ',
                    'Fashionara',
                    'BigFlix',
                    'IndiaCircus',
                    'Yepme',
                    'Infibeam',
                    'Purplle',
                    'AliExpress',
                    'HappilyUnmarried',
                    'BagItToday',
                    'Croma',
                    'Naaptol',
                    'ManiacStore',
                    'D2HShop',
                    'AskMeBazaar',
                    'Rediff',
                    'Xiaomi',
                    'Syberplace',
                    'makemytrip',
                    'nearbuy',
                    'GreenDust',
                    'Tatacliq',
                    'LeMall'];

        });

    </script>


</body>

In this the list names are hard coded .and i want it from object but i dont know how to use scope as object

did you tried anythings ? Do you have some code to show us at least ? — Nicolas, Oct 31 '17 at 12:34
This post explains how to access ViewBag properties in your AngularJs controller. http://blog.pdsullivan.com/posts/2014/09/22/angularjs-razormvc.html — jbrown, Oct 31 '17 at 13:14

score 0 · Accepted Answer · answered Oct 31 '17 at 13:08

Here's an example that will do a quick search of the list on the value in the text box, and has two radio buttons that will sort the list in ascending or descending order. Almost everything is handled by AngularJS.

I also updated it to fill in a textbox when you click on any store.

(function() {
  var app = angular.module('StoreApp', []);

  var StoreController = function() {
    var vm = this;
    vm.sortType = "+";
    
    vm.storeSearch = "";
    
    vm.setSort = function(value) {
        vm.sortType = value;
    };
    vm.fillBox = function(store) {
        vm.selectedStore = store;
    }
    vm.StoreName = [
      'Flipkart',
      'Amazon',
      'Snapdeal',
      'Jabong',
      'Trendin',
      'Lenskart',
      'Zovi',
      'BabyOye',
      'ShopMore24',
      'BasicsLife',
      'PrettySecrets',
      'American Swan',
      'ShopClues',
      'FernsNPetals',
      'Pepperfry',
      'Koovs',
      'FoodPanda',
      'BookmyFlower',
      'Printvenue',
      'Amar Chitra Katha',
      'Booking',
      'TicketGoose',
      'Myntra',
      'FirstCry',
      'Archies Online',
      'Dominos',
      'Bewakoof',
      'Healthkart',
      'Zivame',
      'eBay',
      'Paytm',
      'Surat Diamond',
      'Groupon',
      'indiatimes',
      'Yatra Hotels',
      'Thomas Cook Hotels',
      'FabFurnish',
      'VistaPrint',
      'KFC',
      'Mobikwik',
      'JustEat',
      'Candere',
      'Eureka Forbes',
      'Simplilearn',
      'Thomas Cook Flights',
      'Nord51',
      'ClickSense',
      'The Mobile Store',
      'MakeMyTripHotels',
      'Expedia',
      'HomeShop18',
      'StarCJ',
      'Fashionara',
      'BigFlix',
      'IndiaCircus',
      'Yepme',
      'Infibeam',
      'Purplle',
      'AliExpress',
      'HappilyUnmarried',
      'BagItToday',
      'Croma',
      'Naaptol',
      'ManiacStore',
      'D2HShop',
      'AskMeBazaar',
      'Rediff',
      'Xiaomi',
      'Syberplace',
      'makemytrip',
      'nearbuy',
      'GreenDust',
      'Tatacliq',
      'LeMall'
    ];

  };

  app.controller("StoreController", [StoreController]);
})();

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" href="~/content/css/coupons.css"> </head>

<body>
  <section class="section panel">
    <h2 class="no-margin-top">Submit your Coupon:</h2>
    <div class="panel-body" ng-app="StoreApp">
      <form>
        <div ng-controller="StoreController as vm">
          <div>
            <div>
              <h4>STORENAME: </h4>
              <input type="text" placeholder="Search for Store.." ng-model="vm.storeSearch"/>
              <input type="text" placeholder="Selected Store" ng-model="vm.selectedStore" disabled />
              <fieldset>
                <label for="ascending">Ascending</label>
                <input id="ascending" type="radio" ng-model="vm.sortType" name="group" ng-change="vm.setSort('+')">
                <label for="descending">Descending</label>
                <input id="descending" type="radio" ng-model="vm.sortType" name="group" ng-change="vm.setSort('-')">
              </fieldset>

            </div>
            <ul id="myUL" ng-repeat="store in vm.StoreName | orderBy: vm.sortType | filter: vm.storeSearch">
              <li ng-click="vm.fillBox(store)"> {{ store }} </li>
            </ul>
          </div>
        </div>

Hi Sir, This code Helps me alot but i want to use only one text box for this. Where list get filtered and on click of list it populates the same textbox . Plus i want list to show up on key up event .Like list pops up down when there is a key up event and on using key down i cud go down up on list and select with enter button — Asad Kapadia, Nov 01 '17 at 06:29
Sir I have done as per i need by now. Only thing left is the list should show up and filter on key press and on using key down i can go to down and select the value by scrolling on list — Asad Kapadia, Nov 01 '17 at 07:51

score -1 · Answer 2 · answered Oct 31 '17 at 12:42

-1

This looks like you're recreating Angular-UI's UI-Select. Would that fill your needs? Don't recreate the wheel if you don't have to.

answered Oct 31 '17 at 12:42

Steve -Cutter- Blades

5,057
2
26
40

My point was that you don't need to write the component yourself when one exists that will do all of this for you. Click on the link in the answer to see what I mean. – Steve -Cutter- Blades Oct 31 '17 at 13:18
I agree with @Steve-Cutter-Blades there's a lot of components out there that you can use like [smart-table](http://lorenzofox3.github.io/smart-table-website/) which by the way has great documentation and easy to use Cheers. – code.cycling Nov 01 '17 at 00:44

Filtering in Angular JS

2 Answers2

Linked