AngularJS-自定义过滤器 ng-repeat 求和
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基础-自定义过滤器</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>ng-repeat 求和</h2>
<table border="1" width="400">
<th>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</th>
<tr ng-repeat="item in items">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.stature}}</td>
</tr>
<tr>
<td>合计</td>
<td></td>
<td ng-bind="items | sumAge:items:'age'"></td>
<td></td>
</tr>
</table>
</div> </div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',['myApp.filter']);
var appFilter=angular.module('myApp.filter',[]);
//自定义过滤器
myApp.filter('sumAge',function(){
//根据第一个参数,第二个参数求和
return function(input,n1,n2){
console.log("输入值 : "+input);
console.log("第一个参数: "+angular.toJson(n1));
console.log("第二个参数 :"+n2);
var sum=0;
angular.forEach(input, function (item) {
sum += item.age;
});
return sum;
}
}) </script>
<script>
myApp.controller('myCtrl', ['$scope', function ($scope) {
$scope.items = [
{
name: '鲁迅',
age: 27,
stature: 165
},
{
name: '胡适',
age: 25,
stature: 170
},
{
name: '契诃夫',
age: 27,
stature: 175
},
{
name: '巴尔扎克',
age: 29,
stature: 165
}];
}]);
</script>
</body>
</html>
AngularJS-自定义过滤器 ng-repeat 求和的更多相关文章
- 创建 AngularJS 自定义过滤器，带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- angularJS自定义过滤器、服务和指令
自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } }); 自定义创建指令 mainA ...
- angularJS自定义 过滤器基础
先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...
- AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
- angularjs自定义过滤器
实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...
- 关于angularjs 中自定义过滤器
包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...
- AngularJs练习Demo8 自定义过滤器
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- AngularJS实现的自定义过滤器简单示例
本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- AngularJS中自定义过滤器
AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...
- angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
随机推荐
- web渗透测试（上传漏洞）
一句话木马—— 一句话木马短小精悍,而且功能强大,隐蔽性非常好,在入侵中扮演着强大的作用. 黑客在注册信息的电子邮箱或者个人主页等插入类似如下代码: <%execute request(“val ...
- win7系统电脑显示windows副本不是正版怎么办
win7系统电脑显示windows副本,可以:在开始输入框中输入cmd——以管理员权限运行——在命令行中输入SLMGR -REARM,——重启.
- 使用django进行发送 邮件
我们来看一下 django发送 邮件的整个流程 第一步:例先去 网易163注册账号并激活发邮件功能 把授权码进行 开启 来到我们的项目setting中进行 一个配置: # 邮箱的配置信息 EMAIL_ ...
- Python实现——一元线性回归(最小二乘法)
2019/3/24 线性回归--最小二乘法公式法 暂时用python成功做出来了图像,但是其中涉及到的公式还是更多的来自于网络,尤其是最小二乘法公式中的两个系数的求解,不过目前看了下书高数也会马上提及 ...
- C++ #include " " 与 <>有什么区别？
#include <> 和 #include "" 都会在实现定义的位置查找文件,并将其包含. 区别是若 #include "" 查找成功,则遮蔽 ...
- NAND NOR Flash 和MTD
来自:http://blog.sina.com.cn/s/blog_6b489d5e0102xm62.html 一.NAND和NOR Flash 一般来说,快闪记忆体可分为两大规格,一个是NAND, ...
- jenkins官方文档（中文版）
https://www.w3cschool.cn/jenkins/
- 009 Android Fragment动态用法（实现动态菜单栏）设置控件为满屏状态
·1.MainActivity采用线性布局 2.在app--->res--->layout,右击new--->xml---->layout xml FILE <1> ...
- [转] python提取计算结果的最大最小值及其坐标
python提取计算结果的最大最小值及其坐标 我们在fluent当中后处理的时候,可以通过fluent本身得到某些物理量的最大值和最小值,但是我们却无法确定这些最大值和最小值的具体位置.其实我们可以将 ...
- Luogu P1436 棋盘分割 暴力DP
我的天,,,,,n=8,k<=15,,,这怕不是暴力DP+高维数组.... 开一个五维数组f[k][i][j][p][q]表示从(i,j)到(p,q)中分成k个矩形最小的平方和. 然后初始化时用 ...