Skip to content Skip to sidebar Skip to footer

Filtering In Angular Js

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', []);

  varStoreController = 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><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><linkrel="stylesheet"href="~/content/css/coupons.css"></head><body><sectionclass="section panel"><h2class="no-margin-top">Submit your Coupon:</h2><divclass="panel-body"ng-app="StoreApp"><form><divng-controller="StoreController as vm"><div><div><h4>STORENAME: </h4><inputtype="text"placeholder="Search for Store.."ng-model="vm.storeSearch"/><inputtype="text"placeholder="Selected Store"ng-model="vm.selectedStore"disabled /><fieldset><labelfor="ascending">Ascending</label><inputid="ascending"type="radio"ng-model="vm.sortType"name="group"ng-change="vm.setSort('+')"><labelfor="descending">Descending</label><inputid="descending"type="radio"ng-model="vm.sortType"name="group"ng-change="vm.setSort('-')"></fieldset></div><ulid="myUL"ng-repeat="store in vm.StoreName | orderBy: vm.sortType | filter: vm.storeSearch"><ling-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"