首先要有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. mysql主从复制简单配置，满满的干货

    mysql主从备份(复制)的基本原理 mysql支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.mysql复制基于主服务器在二进制日志中跟踪所有对数据库的更改 ...

  2. CentOS修改默认yum源为国内yum镜像源

    修改CentOS默认yum源为mirrors.163.com 1.首先备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repomv /etc/yum.repos. ...

  3. angularjs中向html页面添加内容节点元素代码段的两种方法

    第一种方式:原生JS向html页面添加内容节点元素代码段: <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. LeetCode231.2的幂

    231.2的幂 描述 给定一个整数,编写一个函数来判断它是否是 2 的幂次方. 示例 示例 1: 输入: 1 输出: true 解释: 2^0 = 1 示例 2: 输入: 16 输出: true 解释 ...

  5. sharepoint_study_2

    描述:向SharePoint中批量添加用户 解决:原文地址:http://bbs.winos.cn/thread-89236-1-1.html 一般情况下,要想登录SharePoint server ...

  6. P1353_[USACO08JAN]跑步Running 我死了。。。

    我死了...被绿题虐...看来我的水平有待提高...QWQ 好吧,就是跑步的时候只能从跑步的状态转移过来 休息的时候可以从上一次休息时转移过来,也可以从某次跑步的时转移过来,需要枚举从哪一个状态转移来 ...

  7. ansys 14.0

    张建伟等．2012.12 人民邮电 一天一本书,这种感觉 真是爽啊． 但我觉得什么也没学到． 话说回来,此authors 确实书写得比较一般,实例不如百度文档上的WORD实例,理论不如我看的那本CFD ...

  8. 【研究】ms17-010永恒之蓝漏洞复现

    1       永恒之蓝漏洞复现(ms17-010) 1.1     漏洞描述: Eternalblue通过TCP端口445和139来利用SMBv1和NBT中的远程代码执行漏洞,恶意代码会扫描开放44 ...

  9. docker一键安装

    1.任意新服务器上一键安装最新版docker curl -s https://get.docker.com/ | sh 注:安装完成之后,docker默认是没有启动的,需要启动docker 2.doc ...

  10. PIE SDK栅格增强控制

    1. 功能简介 亮度是指发光体(反光体)表面发光(反光)强弱的物理量:对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量:透明度是描述光线透过的程度 栅格数据增强控制主要是通过对亮 ...