首先要有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. gym 102082B dp

    和51nod1055 一样: #include<iostream> #include<cstdio> #include<algorithm> #include< ...

  2. CentOS 中安装 jdk

    1.检查是否安装jdk  rpm -qa|grep jav [root@hadoop110 opt]# rpm -qa|grep java 2.卸载版本地域1.7 的jdk rpm -e 软件包 [r ...

  3. day017-------python 类与类的关系

    类与类的关系的简单说明 一:类与类的关系 001:依赖关系 002:管理关系 003:继承关系: 二:实例理解: 01:依赖关系: # 植物大战僵尸. 创建一个植物. 创建一个僵尸 # 植物: 名字, ...

  4. C++_类入门5-智能指针模板类

    智能指针是行为类似于指针的类对象,但这种对象还有其他功能. 本节介绍三个可帮助管理动态内存分配的智能指针模板(auto_ptr.unique_ptr和shared_ptr). void remodel ...

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

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

  6. C# 字符串操作，可空类型，文档注释，嵌套类型

    字符串 字符串是Unicode字符串数组,且是不可变的 这种操作不会影响到原来的字符串,它会新添加一个副本. 有关Split的操作 using System; using System.Collect ...

  7. Q686 重复叠加字符串匹配

    给定两个字符串 A 和 B, 寻找重复叠加字符串A的最小次数,使得字符串B成为叠加后的字符串A的子串,如果不存在则返回 -1. 举个例子,A = "abcd",B = " ...

  8. C++ 调用Python3

    作为一种胶水语言,Python 能够很容易地调用 C . C++ 等语言,也能够通过其他语言调用 Python 的模块. Python 提供了 C++ 库,使得开发者能很方便地从 C++ 程序中调用 ...

  9. Vue 项目启动抛出 Error/ No PostCSS Config found in

    项目启动时抛出 Error: No PostCSS Config found in … 的错误表示某个 css 文件不能被引入 解决办法: module.exports = { plugins: { ...

  10. js中的table导出成Excel表格

    首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...