Question

我想在角度JS中创建一个过滤器。我的列表来自数据库，因为CouponsOperationResult objResult = ViewBag.StoreList; 此列表中有74个商店名称。我想要一个过滤器，其中有一个输入文本框。首先是列表显示相应的过滤器。第二件事是它应该只在有关键事件时出现。第三件事它应该使用文本框中的值进行相应过滤，第四件事是在点击列表时应该在文本框中填充值。

布局=＆＃34;〜/ Views / Shared / _LayoutCoupons.cshtml＆＃34 ;; 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>

在这个列表名称是硬编码的。我想从对象但我不知道如何使用范围作为对象

Answer 1

这是一个示例，它将快速搜索文本框中值的列表，并有两个单选按钮，按升序或降序对列表进行排序。几乎所有东西都由AngularJS处理。

当您点击任何商店时，我也更新了它以填写文本框。

＆＃13;

(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]);
})();

＆＃13;

<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>

＆＃13;

Answer 2

这看起来像是在重新创建Angular-UI的UI-Select。这会满足你的需求吗？如果你不需要，不要重新创建轮子。

过滤Angular JS

2 个答案: