Angular 를 사용하여 검색 상자를 구현하는 방법
1. 요구 사항:
AngularJS 프레임워크를 사용하여 휴대폰 제품 검색 기능 구현, 제목 요구 사항:
1) 자체 소재를 찾아 기존 데이터 형식에 따라 휴대폰 제품 데이터를 최소 1 개 이상
2) 자체 디자인 페이지에 "포함 검색 결과를 실시간으로 표시해야 함 표시 섹션에서
4) 검색 기준 특정 요구 사항:
검색 상자 (운영 체제, 제품명, 제조업체의 퍼지 질의와 일치)
가격 범위 (시작 가격 ~ 종료 가격)
2 < P > 둘째, 검색 상자 텍스트를 입력하면 검색 상자 텍스트와 일치하는 품목이 동적으로 표시됩니다. < P > 여기서 동적으로 가리킬 때 문자를 입력할 때마다 제품 필터링이 수행됩니다.
마지막으로 가격의 상한과 하한도 같은 원리다. < P > 그렇다면, 우리가 angular 를 사용하는 것이 가장 편리하다. Angular 는 양방향 데이터에 대한 지원이 매우 좋기 때문이다.
3. 실제 코드:
1)HTML 코드:
< ! DOCTYPE html>
< Html lang="zh-CN">
< 헤드 >
< 메타 charset = "utf-8" >
< 메타 http-equiv = "x-ua-compatible" content = "ie = edge, chrome = 1" >
< 메타 이름 = "viewport" content = "width = device-width, initial-scale = 1" >
< 제목 > Angular js page useing bootstrap framework < /title>
< Link rel="stylesheet" href="">
< Scriptsrc = "../lib/angular/angular-v1.6.6.js" > < /스크립트 >
< /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 http app = angular.module ('search app', []);
httpapp.controller ('datactrl', ["$ scope", "$ http", function ($ scope, $ http
// 백엔드에서 얻은 JSON 데이터를 시뮬레이션합니다.
$scope.content ='';
$ scope. $ watch ("content+top+bottom", function () {
http.then (
// 가격 필터링 수행.
$ scope.datas = $ scope.datas.filter (function (x, index) {
if ($ scope .. & $ scope.bottom = = = undefined)
{
return 1;
}
elseif ($ scope.top = = = undefined) {
return x.price > = $ scope.bottom
}
elseif ($ scope.bottom = = = undefined) {
return x.pro =$scope.top;
}
else{
return x.price> =$scope.bottom& & X.price< =$scope.top;
}
});
// 검색 컨텐츠 필터링.
$ scope.datas = $ scope.datas.filter (function (x, index) {
system = x.sys
name = x.name.indexof ($ scope.content)+1;
producer = x.producer.indexof ($ scope.content)+1;
if (시스템+이름+제품 > = 1) {
복귀 1;
}
else{
return ;
}
})
},
//errorcallback
functionerror (response) {
conse
}
);
});
}]); 팻: 게으름을 피우기 위해 멋진 스타일을 쓰지 않았어요. 필요한 경우 직접 추가할 수 있습니다.
3)conf.json 코드:
[
{
"system": "IOs",
"name": "aa
"pic": "1.jpg"
},
{
"system": "miui",
"name"
"pic": "2.jpg"
},
{
"system": "Android",
"nas
"pic": "3.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"
"pic": "4.jpg"
},
{
"system": "IOs",
"name"