angularjs 遍历
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.dataList = [
'aaaaa' , 'bbbbb' , 'cccccc'
];
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<ul>
<li ng-repeat=" data in dataList ">{{data}}</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
var oriArr = [
{ name : "red" , age : "" },
{ name : "yellow" , age : "" },
{ name : "blue" , age : "" },
{ name : "green" , age : "" }
];
$scope.dataList = oriArr; $scope.fnSort = function(arg){
arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg]; //$filter是形参传过来的，orderBy是调用过滤器的orderBy方法，$scope.dataList是过滤的集合，arg是按照什么排序，arguments.callee['fnSort'+arg]为true则从小到大排序为false则从大到小排序。
$scope.dataList = $filter('orderBy')($scope.dataList , arg , arguments.callee['fnSort'+arg] );
};
$scope.fnFilter = function(){ //$filter('filter')表示调用过滤器的filter方法，$scope.filterVal是filter方法过滤的关键词
$scope.dataList = $filter('filter')( oriArr , $scope.filterVal );//dataList变化了视图也跟着变化了
};
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="text" ng-model="filterVal"><input type="button" ng-click="fnFilter()" value="搜索">
<table border="">
<tr>
<th ng-click="fnSort('name')">姓名</th>
<th ng-click="fnSort('age')">年龄</th>
</tr>
<tr ng-repeat="data in dataList">
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.active1{ background:red;}
.active2{ background:blue;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.dataList = [
'aaaaa' , 'bbbbb' , 'cccccc' , 'dddddd' , 'eeeeee'
];
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<ul>
<li ng-repeat=" data in dataList ">{{ $even }}</li>//奇数行返回true
//隔行换色
<li class="{{ $even ? 'active1' : 'active2' }}" ng-repeat=" data in dataList ">{{ data }}</li>
</ul> //循环3个标签div,p,div
<div ng-repeat-start="data in dataList">{{data}}</div>
<p>{{data}}</p>
<div ng-repeat-end>{{data}}</div>
</div>
</body>
</html>
angularjs 遍历的更多相关文章
- 提高前端开发效率必备AngularJS （基础）
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- AngularJS学习笔记1
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- angularjs基本执行流程
近期温习了下angularjs执行流程,备记下.以便查看. 主要的执行流程例如以下: 1.用户请求应用起始页. 2.用户的浏览器向server发起一次HTTP连接,然后载入index.html页面,这 ...
- AngularJS学习笔记（一）走近AngularJS
什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...
- AngularJS简单入门
什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...
- AngularJS 启程三
<!DOCTYPE html> <html lang="zh_CN"> <head> <title>字数小例子</title& ...
- Angularjs和Ionic框架搭建webApp
本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...
- AngularJS简介-起步阶段
AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HT ...
- Angular快速入门篇
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
随机推荐
- spring boot和maven的约定大于配置体现在哪些方面
spring boot和maven的约定大于配置体现在哪些方面? 两者都遵从了约定大于配置的路线 约定优于配置体现点: 1.maven的目录文件结构 1)默认有resources文件夹,存放资源配置文 ...
- 前端project师养成记：开发环境搭建(Sublime Text必备插件推荐)
为了让自己更像一个前端project师,决定从开发环境開始武装自己. 本文将介绍前段project师开发的一些利器的安装步骤,主要包含了: 1.Node.js的安装 2.Grunt的安装及经常使用插件 ...
- UVa 12716 GCD XOR （简单证明）
题意: 问 gcd(i,j) = i ^ j 的对数(j <=i <= N ) N的范围为30000000,有10000组例子 思路:GCD(a,b) = a^b = c GCD(a/c ...
- 【笨木头Lua专栏】基础补充02：函数的几个特别之处
没想到距离上一篇基础补充已经过了1年多了,近期准备捡回Lua,把基础都补补,今天来聊聊Lua的函数吧~ 0.环境 我突然对Lua又大感兴趣的最主要原因是,Cocos Code IDE開始浮出水面了,它 ...
- java布局管理
FlowLayout :组件在一行中按加入的先后顺序从左至右水平排列,排满后折行,每行中的组件都居中排列.BorderLayout:把容器空间划分为北.南.西.东.中五个区,每加入一个组件都应说明把这 ...
- sicily 1137 河床 (二分分治)
<计算机算法设计与分析>啃书中... 有点看不进书,就来刷个水题吧,刚开始看错题了还. 注意:是所有测量点相差均不大于di而不是相邻两点... //1137.河床 #include < ...
- express+模板引擎构建项目时遇到的几个小问题
1.启动项目/调试项目 项目启动用:npm start 由于每次更改路由代码后必须重启服务才可以看效果,所以为了达到热加载的效果我们安装 supervisor:全局安装也可以: npm install ...
- Nashorn——在JDK 8中融合Java与JavaScript之力--转
原文地址:http://www.infoq.com/cn/articles/nashorn 从JDK 6开始,Java就已经捆绑了JavaScript引擎,该引擎基于Mozilla的Rhino.该特性 ...
- C#如何生成一个随机种子for Random？
就这么写: Random rand = new Random((int)DateTime.Now.Ticks); 或者这么写: Random rand = new Random(new Guid(). ...
- 前端学习之路——gulp篇
一.构建gulp环境 1.下载nodejs gulp基于node.js,要通过nodejs的npm安装gulp,所以要先安装node.js环境.(英文官网/中文官网链接). 通过cmd命令窗口确定安装 ...