Maison > Article > interface Web > Comment implémenter un champ de recherche en utilisant Angular
Comment implémenter un champ de recherche en utilisant Angular
- 亚连original
- 2018-06-11 14:41:222755parcourir
Cet article présente principalement en détail la mise en œuvre par Angular des fonctions de champ de recherche et de limite supérieure et inférieure de prix. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
Si vous n'avez rien à faire, écrivez-en un Simple. champ de recherche angulaire.
1. Exigences :
Utilisez le framework AngularJS pour implémenter la fonction de recherche de produits pour téléphones mobiles :
1) Trouvez les matériaux par vous-même et convertissez-les. le téléphone mobile au format de données d'origine Les données du produit sont enrichies à au moins 10 ou plus
2) Concevez vous-même la page, qui doit inclure la "partie conditions de recherche" et la "partie affichage des informations sur le téléphone mobile"
3) Lors de la modification des conditions de recherche, les résultats de la recherche doivent être affichés en temps réel dans "
4) Exigences spécifiques pour les conditions de recherche dans "Partie d'affichage" :
Zone de recherche (correspond au système d'exploitation, au nom du produit, fabricant pour requête floue)
Gamme de prix (prix de départ ~ prix final)
2. Analyse de la demande :
Tout d'abord, nous devons rendre le produit sur le page.
Deuxièmement, lorsque nous saisissons le texte du champ de recherche, les produits qui correspondent au texte du champ de recherche sont affichés dynamiquement.
Parmi eux, dynamique signifie qu'à chaque fois que nous saisissons un caractère, le produit sera filtré.
Enfin, le même principe s’applique aux limites supérieure et inférieure du prix.
Donc, de cette façon, il est plus pratique pour nous d'utiliser angulaire. Parce qu'angular prend très bien en charge les données bidirectionnelles.
3. Code réel :
1) Code HTML :
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>AngularJS Page Useing Bootstrap Framework</title>
<link rel="stylesheet" href="">
<script src="./lib/angular/angular-v1.6.6.js"></script>
</head>
<body ng-app="searchApp">
<p ng-controller="dataCtrl">
<input type="text" name="搜索框" ng-model="content" placeholder="请输入要搜索的物品">
<input type="text" name="价格上限" ng-model="top" placeholder="价格上限">
<input type="text" name="价格下限" ng-model="bottom" placeholder="价格下限">
<p>
<ul>
<li ng-repeat="p in datas">
{{p.name}}
</li>
</ul>
</p>
</p>
</body>
</html>2) Code JS :
let httpApp = angular.module( 'searchApp', [] );
httpApp.controller( 'dataCtrl', [ "$scope", "$http", function( $scope, $http ){
let http = $http.get( "conf.json" );
//模拟从后端获取的json数据。
$scope.content = '';
$scope.$watch("content + top + bottom",function(){
http.then(
// success callback
function success( response ){
$scope.datas = response.data;
//进行价格筛选。
$scope.datas=$scope.datas.filter(function( x,index ){
if($scope.top===undefined&&$scope.bottom===undefined)
{
return 1;
}
else if($scope.top===undefined){
return x.price>=$scope.bottom
}
else if($scope.bottom===undefined){
return x.price<=$scope.top;
}
else{
return x.price>=$scope.bottom&&x.price<=$scope.top;
}
});
//进行搜索内容筛选。
$scope.datas=$scope.datas.filter(function( x,index ){
system=x.system.indexOf($scope.content)+1;
name = x.name.indexOf($scope.content)+1;
producer=x.producer.indexOf($scope.content)+1;
if(system+name+producer>=1){
return 1;
}
else{
return 0;
}
})
},
// error callback
function error( response ){
console.log( response );
}
);
});
} ] );PS : Pour être paresseux, je n'ai pas écrit un joli style. Vous pouvez l'ajouter vous-même si vous en avez besoin.
3) Code conf.json :
[
{
"system": "ios",
"name": "Apple iPhone 6s 16GB 玫瑰金色",
"price": 4698,
"producer": "Apple",
"pic": "01.jpg"
},
{
"system": "MIUI",
"name": "小米手机4S 全网通版 2GB内存 16GB 白色",
"price": 1499,
"producer": "小米",
"pic": "02.jpg"
},
{
"system": "Android",
"name": "魅蓝note3 （16GB） 银色 全网通公开版 双卡双待",
"price": 1099,
"producer": "魅族科技",
"pic": "03.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6587,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6578,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6788,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6878,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6528,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6988,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6388,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6378,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6738,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6568,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6558,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6738,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6428,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 652488,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 654588,
"producer": "Apple",
"pic": "04.jpg"
},
{
"system": "ios",
"name": "Apple iPhone 6s Plus 64GB 银色 移动联通电信4G手机",
"price": 6545645688,
"producer": "Apple",
"pic": "04.jpg"
}
]PS : Les données json transmises par le serveur sont simulées au travers d'objets. De plus, des images peuvent être ajoutées et mises en œuvre par vous-même.
4. Dernière question :
Bien sûr, le code que j'ai téléchargé a laissé un trou. Comment annuler la restriction de la fourchette de prix correspondante après avoir saisi le prix et l'avoir effacé.
Enfin, vous pouvez réfléchir à la manière dont la méthode de recherche peut être optimisée en tant qu'extension.
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.
Articles associés :
Introduction détaillée à la méthode nextTick dans Vue
Quelles sont les utilisations des slots dans les composants Vue (tutoriel détaillé )
structure du projet vue (tutoriel détaillé)
Comment implémenter la fonction de complétion des invites de courrier électronique dans JS
Comment implémenter le mouvement parabolique via JS (tutoriel détaillé)
Comment utiliser les méthodes de session et de cookie en express (tutoriel détaillé)
Comment implémenter l'algorithme de courbe de Bézier à l'aide de JavaScript (tutoriel détaillé)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript