AngularJS实现产品列表（页面搜索，排序）

最新推荐文章于 2021-03-22 23:10:18 发布
最新推荐文章于 2021-03-22 23:10:18 发布
阅读量426 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/516840
版权

标签属性介绍

ng-class="{className:expression}" 如果expression为true，则使用className这个class。

ng-click="functionName(pram)" 这跟onclick是一样的，点击就执行functionName(pram)。

ng-repeat="i in set | filter:filterExpression or filterFunction| orderBy:order+orderType" 循环set里的元素，有过滤条件和排序条件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
< html >
 
< head >
     < meta  charset = "utf-8" >
     < link  href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"  rel = "stylesheet" >
     < style  type = "text/css" >
     body {
         font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
     }
     
     .orderColor {
         color: red;
     }
     </ style >
</ head >
 
< body  ng-app = "product" >
     < div  class = "container"  ng-controller = "firstController" >
         < nav  class = "navbar navbar-inverse" >
             < div  class = "container-fluid" >
                 <!-- Collect the nav links, forms, and other content for toggling -->
                 < div  class = "collapse navbar-collapse"  id = "bs-example-navbar-collapse-1" >
                     < form  class = "navbar-form navbar-left"  role = "search" >
                         < div  class = "form-group" >
                             < input  type = "text"  class = "form-control"  placeholder = "查找内容"  ng-model = "search" >
                         </ div >
                     </ form >
                 </ div >
             </ div >
         </ nav >
         < table  class = "table" >
             < thead >
                 < tr >
                     < th  ng-class = "{dropup:order===''}"  ng-click = "changeOrder('id')" >产品名称< span  class = "caret"  ng-class = "{orderColor:orderType==='id'}" ></ span ></ th >
                     < th  ng-class = "{dropup:order===''}"  ng-click = "changeOrder('name')" >产品编号< span  class = "caret"  ng-class = "{orderColor:orderType==='name'}" ></ span ></ th >
                     < th  ng-class = "{dropup:order===''}"  ng-click = "changeOrder('price')" >产品价格< span  class = "caret"  ng-class = "{orderColor:orderType==='price'}" ></ span ></ th >
                 </ tr >
             </ thead >
             < tbody >
                 < tr  ng-repeat = "item in productData | filter:search | orderBy:order+orderType" >
                     < td >`item`.`id`</ td >
                     < td >`item`.`name`</ td >
                     < td >{{item.price | currency:'RMB '}}</ td >
                 </ tr >
             </ tbody >
         </ table >
     </ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('product', [])
         .service('productData', function() {
             return [{
                 id: 1098,
                 name: 'iPhone',
                 price: 5288
             }, {
                 id: 5420,
                 name: 'iPad',
                 price: 4388
             }, {
                 id: 2067,
                 name: 'Mac Book',
                 price: 10888
             }, {
                 id: 5991,
                 name: 'Surface',
                 price: 9288
             }];
         })
         .controller('firstController', function($scope, productData) {
             $scope.productData = productData;
             $scope.orderType = 'id';
             $scope.order = '-';
             $scope.changeOrder = function(type) {
                 $scope.orderType = type;
                 if ($scope.order === '') {
                     $scope.order = '-';
                 } else {
                     $scope.order = '';
                 }
             }
         });
     </ script >
</ body >
 
</ html >









本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1668963，如需转载请自行联系原作者
weixin_33847182
关注
angular项目随笔——前端实现实时搜索展示搜索列表
WXY19951125的博客
04-16 3320
1. 在项目中，会遇到初始化页面是一个列表，但页面中包含有一个input搜索框，输入关键字搜索的时候，列表需要实时变化，列表条目总数也需要实时变化。类似下图的需求。解决方案如下：&lt;input placeholder="输入镜像名称查找" ng-model="projectImageKey"/&gt;&lt;ul&gt;        &lt;li  ng-repeat="item in pr...
angularJs实现增删改查示例1-列表查询界面
三生三世的博客
02-16 2738
先上效果图： *************************************以下是代码截图************************************** 因为前端代码贴过来很多都直接变成前端组件了，所以直接截图 1、导入的js、css引用，以及angularJs需要注意的地方，如：ng-app="" 与 ng-controll
angularjs商品列表页代码
03-01
angularjs商品列表页代码
angularjs php电商网站,AngularJs应用：实现类似购物页面的一个小例子（附代码）...
weixin_42300211的博客
03-22 223
本篇文章给大家带来的内容是关于AngularJs应用：实现类似购物页面的一个小例子(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。写个小应用，熟练一下AngularJs.。Page Titlevar myApp=angular.module('myApp',[]);//定义一个控制器var model={//model模块，里面主要包含了数据money:0,items:[...
商品列表搜索查询
thw_m的博客
10-14 541
商品列表搜索查询                               var app = angular.module("myApp",[]);             app.controller("myCtrl",function($scope){                 $scope.products = [{                     id:80,
angularContacts:由AngularJs实现的通讯录
04-27
【AngularJs实现的通讯录详解】 AngularJs，作为Google维护的一款强大的前端JavaScript框架，以其双向数据绑定、模块化和指令系统等特性深受开发者喜爱。在本项目“angularContacts”中，我们将深入探讨如何利用...
AngularJS 过滤与排序详解及实例代码
11-22
AngularJS是一款强大的前端开发框架，它允许开发者轻松地实现数据绑定、指令和各种高级特性，如过滤和排序。 首先，让我们关注AngularJS的过滤器（filter）。过滤器在AngularJS中用于处理和转换数据，例如筛选、...
AngularJs页面筛选标签小功能
10-21
总的来说，AngularJS提供了丰富的指令和过滤器来实现页面筛选功能。通过自定义过滤器、数据绑定以及控制器的配合，我们可以创建出强大且灵活的筛选机制，提升用户体验。在实际项目中，还应注意性能优化，如使用`...
详解angularjs结合pagination插件实现分页功能
12-11
在本文中，我们将深入探讨如何使用AngularJS框架与pagination插件来实现前端的分页功能。AngularJS是一个强大的JavaScript框架，而pagination插件则为它提供了便捷的分页解决方案。以下是一个详细的步骤和示例代码，...
AngularJS的-查询列表
09-14
AngularJS的查询列表，适合刚刚接触AngularJS的人
AngularJS实现银行列表选择
05-04
NULL 博文链接：https://bijian1013.iteye.com/blog/2393931
DCOS管理平台Angularjs构建记(一)
公众号
05-12 5854
记：该文为转载，最近在使用NG开发DCOS管理平台 数据绑定与监控 在业务开发的过程中，我们可能会大量使用DOM操作，这个过程很繁琐，但是有了AngularJS，基本上就可以解脱了，做到这一点的关键是数据绑定。那什么是数据绑定，怎样绑定呢？本节将从多种角度，选取业务开发过程中的各种场景来举例说明。 基于单一模型的界面同步 有时候，我们会有这样的需求，界面上有个输入框，然后有另外一个地方
AngularJS实例教程
weixin_33973609的博客
04-09 180
2019独角兽企业重金招聘Python工程师标准>>> ...
angularjs的表格的增删改查（关于商品）
xiao_hei_1的博客
10-24 432
Title table { border-collapse: collapse; } td, th { width: 200px; border: 1px solid gainsboro; text-align: center;
Angularjs 列表页面筛选
weixin_30413739的博客
09-20 156
个人博客链接：http://blog.yangqiong.com.cn/angularjs-lie-biao-ye-mian-shai-xuan/ 需求：页面URL和查询结果保持一致，当筛选条件变化时能够更新数据和URL 相关知识： $location.search()可以获取或者设置url参数 $scope.$watch 可以检测变量的变化 $routeProvider 中 relo...
angularjs简单的翻页模板
A_xiaomingming的博客
04-10 508
1、css /** 分页样式 */ .pageTurning{ width: 700px; height: 30px; margin: 20px auto; } .pageTurning a{ height: 30px; width: 35px; background-color:white; color: #666666; bo...
angularJS初识--介绍基本功能及用法
charlene0824的博客
06-15 1365
angular是利用JavaScript编写的一个库，是为了克服html在构建应用上的不足。angularJS通过使用标识符的结构让浏览器能够使用新的语法，通过使用被称为指令的新属性来扩展HTML，通过内置的指令来为应用添加功能、并且运行自定义的指令。主要适用于构建CRUD的应用，不适合dom操作频繁的应用。angularJS的基本功能angularJS使得开发现代的单一页面应用程序变得更加容易
angular+ng-zorro后台搜索页面
JUST_lOVE_LE的博客
11-16 1158
继续上一次表格的内容，这次要在页面的头部加上一个搜索框，然后让表格的数据可以根据搜索内容更新 首先要介绍下ng-zorro的栅格化布局,以下摘自官网 在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 布局的栅格
AngularJS ngOption 实现下拉列表详解及实例
"AngularJS使用ngOption实现下拉列表的实例代码" 在AngularJS中，`ngOption`指令是一个非常强大的工具，它允许我们轻松地创建动态的、数据驱动的下拉列表。这个指令使得我们可以根据应用程序的数据模型动态生成选项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值