Angular JS例子 ng-repeat遍历输出
首先要有Angular的插件:然后才开始遍历 :<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head> <body>
<!--
key 代表索引 value代表值
$first 第一个
$last 最后一个
$middle 中间
$even:偶数
track by $index ngRepeat不允许collection中存在两个相同Id的对象,$index以索引为依据进行遍历，避免相同items引起的错误
-->
<div ng-app="hd" id="" ng-controller="ctrl">
<ul>
<li ng-repeat="(k,v) in data track by $index">
<sapn ng-if="$first" style="color:red">{{k}} 名称：{{v.name}} 网址：{{v.url}}</sapn>
<span ng-if="$middle">{{k}} 名称：{{v.name}} 网址：{{v.url}}</span>
<span ng-if="$last" style="color: blue;">{{k}} 名称：{{v.name}} 网址：{{v.url}}</span>
</li>
</ul>
</div>
<script>
var m = angular.module("hd", []);
m.controller("ctrl", ["$scope", function($scope) {
$scope.data = [{
name: '百度',
url: 'http://baidu.com'
}, {
name: '腾讯',
url: 'http://qq.com'
},{
name:"新浪",
url:"http://sina.com"
}];
}]);
</script>
</body> </html>
Angular JS例子 ng-repeat遍历输出的更多相关文章
- angular.js 例子
angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...
- JS对JSON对象遍历输出的时候真的是按照顺序输出吗？
对象的遍历输出并不是按照对象属性定义顺序来的,那么是按照什么规则来的呢,仔细深入研究你会发现,这还跟浏览器有关系,Chrome跟IE是不一样的,所以给出以下结论: Chrome Opera 的 Jav ...
- js对象遍历输出顺序错乱的问题
一.js对象遍历顺序错乱的原因 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsf ...
- js数组及数组应用（冒泡和二分，遍历输出）
一.定义:1)var arr=new Array(); 加数据:arr[0]=1; 2)定义同时赋值:var arr=new Array(1,2,3,4,5); 3)调用:var arr=new Ar ...
- Angular.js vs Ember.js
Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- Angular.js 的初步认识
MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...
- Angular JS 学习之简介
1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...
- 精通 Angular JS 第一天——Angular 之禅
简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单 ...
随机推荐
- Leetcode 8. String to Integer (atoi) atoi函数实现 (字符串)
Leetcode 8. String to Integer (atoi) atoi函数实现 (字符串) 题目描述 实现atoi函数,将一个字符串转化为数字 测试样例 Input: "42&q ...
- gym 102082B dp
和51nod1055 一样: #include<iostream> #include<cstdio> #include<algorithm> #include< ...
- HDU - 5996 树上博弈 BestCoder Round #90
就是阶梯NIM博弈,那么看层数是不是奇数的异或就行了: #include<iostream> #include<cstdio> #include<algorithm> ...
- scrapy 请求和响应
scrapy Request类的一些参数意义 url: 就是需要请求,并进行下一步处理的url callback: 指定该请求返回的Response,由那个函数来处理. method: 一般不需要指定 ...
- C++_类和动态内存分配3-构造函数中使用new的注意事项
如果在构造函数中使用new来初始化对象的指针成员时必须特别小心. 1 如果在构造函数中使用new来初始化指针成员,则应在析构函数中使用delete. 2 new和delete必须相互兼容.new对应于 ...
- C++_标准模板库STL概念介绍2-泛型编程
有了之前使用STL的经验后,接下来讨论泛型编程及其底层的理念: 首先我们知道STL只是泛型编程的一种: 而面向对象的编程方式关注的是编程的数据方面: 而泛型编程关注的是算法: 但是,他们之间的一个重要 ...
- Moving docker images location to different partition
By default docker will put all the data including images under /var/lib/docker(At least on Debian). ...
- Hadoop 使用基础
[摘录自] https://www.yiibai.com/hadoop/hadoop_hdfs_operations.html#article-start 一.HDFS 使用基础 格式化配置HDFS文 ...
- 2.4 GO Interface
package itface type Sender interface { Send(url string) string } type Geter interface { Get(url stri ...
- nginx 代理服务指令详解
nginx 正向代理与反向代理说明图 超级形象说明. 正向代理指令: 1, resolver 这个用于DNS服务器的ip . DNS服务器的主要工作是进行域名解析,将域名映射为对应IP地址 resol ...