Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Javascript

Filtering In Angular JS

Post a Comment
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

Solution 1:

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>

Solution 2:

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.


Post a Comment for "Filtering In Angular JS"