Angular JSのフィルタリング

Angle JSでフィルタを作成したいと思います。私のリストは、データベースからCouponsOperationResult objResult = ViewBag.StoreList; このリストには74のストア名があります。私はそこに入力textbox.firstものがあるフィルタは、リストがそれに応じてダウンフィルタを表示します。もう一つは、キーアップイベントが発生したときにだけ表示されるべきです。それはテキストボックスの値に応じてフィルタリングする必要があり、4番目はリストをクリックするとテキストボックスに値を入力する必要があります。Angular JSのフィルタリング

レイアウト= "〜/ 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>

リスト名がハードコードされた.AND私は、オブジェクトからそれをしたいが、私は、あなたがしているようにこれが見えオブジェクト

出典

2017-10-31 Asad Kapadia

あなたはanythingsを試したのですか？少なくとも私たちを見せるためのコードはありますか？ – Nicolas

はい先生、私はコード –

の下に投稿しました。私はあなたが自動完成テキストボックスをコードしようとすることができると思います –

ここでは、テキストボックスの値の一覧をすばやく検索し、昇順または降順に並べ替える2つのラジオボタンがあります。ほぼすべてがAngularJSによって処理されます。

また、店舗をクリックするとテキストボックスに入力するように更新しました。

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

出典

2017-10-31 13:08:59 JustinJmnz

こんにちは、このコードは私を助けるが、私はこれのための1つのテキストボックスを使用したい。リストがフィルタリングされ、リストをクリックすると、同じテキストボックスが作成されます。さらに、キーアップイベントに表示するリストが必要です。キーアップイベントがあるときにリストがポップアップし、キーダウンを使用する場合は、リスト上で下に移動し、入力ボタンで選択します。 –

先生これまでに残っているのは、リストが表示され、キー押下時にフィルタリングし、キーダウンを使用して下に移動し、リストをスクロールして値を選択できる –

-1

としてスコープを使用する方法を知らないされていますAngular-UIのUI-Selectを再作成します。それはあなたのニーズを満たすでしょうか？あなたがする必要がない場合は、ホイールを再作成しないでください。

出典

2017-10-31 12:42:58

私はあなたの意見を得ていませんでした。どのようにコードを表示する必要がありますか？ –

私の主張は、あなたのためにすべてのことをするコンポーネントが存在するときに、コンポーネントを自分で書く必要がないということでした。答えのリンクをクリックすると、私の言いたいことが分かります。 –

私は@ Steve-Cutter-Bladesに同意します。そこには[smart-table]（http://lorenzofox3.github.io/smart-table-website/）のように使用できる多くのコンポーネントがあります。素晴らしいドキュメントと使いやすい乾杯。 – Priz

Angular JSのフィルタリング

答えて

関連する問題