Angular实现搜索框及价格上下限功能资源-CSDN文库

170 浏览量 2021-01-19 16:38:39 上传评论收藏 60KB PDF 举报

资源推荐

资源详情

资源评论

Angular实现搜索框及价格上下限功能实现搜索框及价格上下限功能

闲来无事，写一个简单的angular的搜索框。

1.要求：要求：

利用 AngularJS 框架实现手机产品搜索功能，题目要求：

1）自行查找素材，按照原有数据格式将手机产品数据丰富到至少10个以上

2）自行设计页面，需要包含“搜索条件部分”，“手机信息显示部分”

3）当更改任何搜索条件时，需要实时显示搜索结果在“显示部分”中

4）搜索条件具体要求：

搜索框（匹配操作系统、产品名、产商进行模糊查询）

价格区间（开始价格~结束价格）

2.需求分析：需求分析：

首先，我们需要将商品渲染到页面上。

其次，当我们输入搜索框文本时，动态显示符合搜索框文本的商品。

其中，动态指的时我们每输入一个字符，都会进行产品的筛选。

最后，价格的上下限也是同样的原理。

那么，这样一来，我们使用angular是最为方便的。因为angular对双向数据的支持非常好。

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">

<div 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="价格下限">

<div>

<ul>

<li ng-repeat="p in datas">

{{p.name}}

</li>

</ul>

</div>

</div>

</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)

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38695452

粉丝: 3
资源: 899

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip