首先要有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遍历输出的更多相关文章

  1. angular.js 例子

    angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...

  2. JS对JSON对象遍历输出的时候真的是按照顺序输出吗？

    对象的遍历输出并不是按照对象属性定义顺序来的,那么是按照什么规则来的呢,仔细深入研究你会发现,这还跟浏览器有关系,Chrome跟IE是不一样的,所以给出以下结论: Chrome Opera 的 Jav ...

  3. js对象遍历输出顺序错乱的问题

    一.js对象遍历顺序错乱的原因 下边就来实践一下: var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsf ...

  4. js数组及数组应用（冒泡和二分，遍历输出）

    一.定义:1)var arr=new Array(); 加数据:arr[0]=1; 2)定义同时赋值:var arr=new Array(1,2,3,4,5); 3)调用:var arr=new Ar ...

  5. Angular.js vs Ember.js

    Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...

  6. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  7. Angular.js 的初步认识

    MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...

  8. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

  9. 精通 Angular JS 第一天——Angular 之禅

    简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单 ...

随机推荐

  1. iOS开发时间戳与时间NSDate，时区的转换，汉字与UTF8,16进制的转换

    http://blog.sina.com.cn/s/blog_68661bd80101njdo.html 标签: ios时间戳 ios开发时间戳 ios16进制转中文 ios开发utf8转中文 ios ...

  2. shell-003：用for循环统计内存使用量

    shell-100主要是用于练习! #!/bin/bash # 统计内存的使用量(这里用ps统计) # 第一步:不打印第一行,这里的sed ‘1d’ 去掉 for n in `ps aux |sed ...

  3. 网址访问量统计插件 FlagCounter

    网址或博客访问量统计插件  ---> FlagCounter. 网址:http://s01.flagcounter.com/more/ERP2/

  4. Android Studio 常用应用

    1.在控制台的Logcat中输出测试语句 package com.example.lucky.helloworld; import android.support.v7.app.AppCompatAc ...

  5. Linux系统下Qt环境搭建

    http://www.linuxidc.com/Linux/2013-07/87576.htm 主要是需要提前安装一些动态库,否则编译的时候会出现 /usr/bin/ld: cannot find - ...

  6. oracle数据库修改密码

    忘记了数据库的登录密码,oracle数据库无法登录了. 先删除原先的密码保存文件: del E:\oracle_app\Administrator\product\11.2.0\dbhome_1\da ...

  7. 执行npm install 时会报 operation not permitted,unlink......错

    问题现象:在我这项目目录中执行这命令就会报这个错. 问题原因: 后来查了查,说是 npm 5.4.0版本确实会有这个问题. https://github.com/npm/npm/issues/1828 ...

  8. C++ GUI Qt4 编程 （第二版）

    [加拿大]JasminBlanchette [英]MarkSummerfield . 电子工业 2008. 前几天的问题多是因为版本不兼容的问题. QT本身Q4 Q5就有版本问题,然后集成到VS08 ...

  9. 获取url路径的正则

    package unit; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Util { // ...

  10. [转] docker save与docker export的区别

    [From]http://cnodejs.org/topic/59a2304f7aeedce818249eeb 很久没有写博客了,坟头草都长了老高了.写博客要靠惯性,一旦停下来时间长了,就很难再坚持下 ...