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应用程序中使 ...
随机推荐
- JS数组去重 包含去除多个 NaN
Array.prototype.uniq = function () { var arr = []; var flag = true; this.forEach(function(item) { ...
- 基于Asp.Net webApi owin oauth2的实现
干货地址:https://git.oschina.net/DpMa_/WebApi-Owin-oauth2
- 用Beamer做Slides
学术用幻灯片,首选还是latex.但是问题来了,Beamer这个latex幻灯模板还需要很多自定义设置.于是找了网上一些自己觉得好的例子. http://www.latexstudio.net/ind ...
- row_number函数的使用
转 row_number函数的使用 SQL Server数据库ROW_NUMBER()函数的使用是本文我们要介绍的内容,接下来我们就通过几个实例来一一介绍ROW_NUMBER()函数的使用. 实例如下 ...
- 【原创】Unable to read TLD "META-INF/c.tld" from JAR file 解决方法
type Exception report message description The server encountered an internal error () that prevented ...
- schema文件及XML文件的DOM和Sax解析
schema文件 <?xml version="1.0" encoding="UTF-8"?> <schema xmlns="htt ...
- Java线程之基础
Java内存模型(jmm) 线程通信 消息传递 重排序 顺序一致性 Happens-Before As-If-Serial 一.线程的生命周期及五种基本状态 线程生命周期:新建.就绪.运行.阻塞.死亡 ...
- Vue学习之v-if与v-show的区别
v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染,他会根据表达式适当的销毁或重建元素及绑定事件或子组件.若表达式初始值为false,则一开始元素或组件不会渲染,只有当第一次为真时, ...
- k8s使用cephfs
以下为ceph集群操作内容 cephfs 将cephfs挂载到一台服务器 /mnt/cephf . 创建目录 mkdir -p /mnt/cephf/k8s/staff-nginx/{conf,dat ...
- red hat linux之Samba、DHCP、DNS、FTP、Web的安装与配置
本教程是在red hat linux 6.0环境下简单测试!教程没有图片演示,需要具有一定Linux基础知识,很多地方的配置需要根据自己的情况修改,照打不一定可以配置成功.(其他不足后续修改添加) y ...