在Angular JS中过滤
[英]Filtering in Angular JS
问题描述
我想在有角JS中创建一个过滤器。 我的列表来自数据库，作为CouponsOperationResult objResult = ViewBag.StoreList;。 并且此列表中有74个商店名称。 我想要一个有输入文本框的过滤器。第一件事是列表显示了相应的过滤器。 第二件事是它仅在发生按键事件时才显示。 第三件事，它应该使用文本框中的值进行相应的过滤，第四件事是，单击列表时，它应该在文本框中填充值。
布局=“〜/ 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>
在此列表名称是硬编码的。我想从对象中获取它，但我不知道如何将范围用作对象
2 个解决方案
解决方案1
0 已采纳 2017-10-31 13:08:59
这是一个示例，它将在文本框中的值上快速搜索列表，并具有两个单选按钮，这些按钮将按升序或降序对列表进行排序。 几乎所有事情都由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>
解决方案2
-1 2017-10-31 12:42:58
看起来您正在重新创建Angular-UI的UI-Select 。 这样可以满足您的需求吗？ 如果不需要，请不要重新创建轮子。
在角度JS中过滤月份
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.