在Angular JS中过滤 [英] Filtering in Angular JS
问题描述
我想用angular JS创建一个过滤器.我的列表来自数据库，作为CouponsOperationResult objResult = ViewBag.StoreList;.并且此列表中有74个商店名称.我想要一个有输入文本框的过滤器.第一件事是列表显示了相应的过滤器.第二件事是它应该仅在发生按键事件时才显示.第三，应该使用文本框中的值进行相应的过滤；第四，单击列表时，它应该在文本框中填充值.
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;
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
推荐答案
下面是一个示例，它将对文本框中的值进行快速搜索，并具有两个单选按钮，这些按钮将列表按升序或降序排列降序.几乎所有事情都由AngularJS处理.
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>这篇关于在Angular JS中过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
