Angular를 사용하여 검색창을 구현하는 방법
- 亚连원래의
- 2018-06-11 14:41:222706검색
이 글은 주로 Angular의 검색창 구현과 가격 상한 및 하한 기능을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
저는 할 일이 없고 간단한 각도 검색창을 작성합니다.
1. 요구 사항:
모바일 상품 검색 기능을 구현하기 위해 AngularJS 프레임워크를 사용합니다. 질문 요구 사항:
1) 직접 자료를 검색하고 원본에 따라 휴대폰 제품 데이터를 최소 10개 이상으로 풍부하게 만듭니다. 데이터 형식
2) 페이지를 직접 디자인하고 "검색 조건 부분", "휴대폰 정보 표시 부분"을 포함해야 합니다.
3) 검색 조건을 변경할 때 검색 결과가 "디스플레이"에 실시간으로 표시되어야 합니다. 부분"
4) 검색 조건별 요구사항:
검색창(매칭 연산) 시스템, 제품명, 퍼지 쿼리 제조사)
가격 범위(시작 가격~종료 가격)
2. 수요 분석:
먼저, 페이지에 제품을 렌더링해야 합니다.
둘째, 검색창 텍스트를 입력하면 검색창 텍스트와 일치하는 상품이 동적으로 표시됩니다.
그 중 다이나믹이란 문자를 입력할 때마다 해당 상품이 필터링된다는 뜻입니다.
마지막으로 가격의 상한과 하한에도 동일한 원칙이 적용됩니다.
그래서 우리는 이런 식으로 Angle을 사용하는 것이 가장 편리합니다. 각도는 양방향 데이터를 매우 잘 지원하기 때문입니다.
3. 실제 코드:
1) 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) 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: 게을러서 멋진 스타일을 작성하지 않았습니다. 필요한 경우 직접 추가할 수 있습니다.
3) 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: 서버에서 전송되는 json 데이터는 객체를 통해 시뮬레이션됩니다. 또한, 사진을 직접 추가하고 구현할 수도 있습니다.
4. 마지막 질문:
물론 제가 업로드한 코드에는 구멍이 생겼습니다. 가격 입력 및 삭제 후 해당 가격대 제한을 취소하는 방법입니다.
마지막으로 검색 방법을 확장하여 어떻게 최적화할 수 있는지 생각해 볼 수 있습니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
JS를 통해 포물선 모션을 구현하는 방법(상세 튜토리얼)
Express에서 세션 및 쿠키 메소드를 사용하는 방법(상세 튜토리얼)
JavaScript Er을 사용하여 Besser를 구현하는 방법 곡선 알고리즘(상세 튜토리얼)
페이지 새로고침 vuex 데이터가 사라지지 않고 페이지가 점프하지 않는 문제(자세한 튜토리얼)
위 내용은 Angular를 사용하여 검색창을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!