首先要有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. Anya and Cubes 搜索+map映射

    Anya loves to fold and stick. Today she decided to do just that. Anya has n cubes lying in a line an ...

  2. wpa_supplicant

    一 函数接口介绍 wpa_ctrl_open接口用来打开wpa_supplicant的控制接口,在UNIX系统里使用UNIX domain sockets,而在Windows里则是使用UDP sock ...

  3. Octave安装符号工具箱

    1.国内访问Octave的代码包不稳定,可以访问网址http://sourceforge.mirrorservice.org/o/oc/octave/Octave%20Forge%20Packages ...

  4. Android RecyclerView组件和 Spinner(下拉列表框)

    1.RecyclerView <1>知识点介绍 RecyclerView 比 ListView 更高级且更具灵活性. 它是一个用于显示庞大数据集的容器,可通过保持有限数量的视图进行非常有效 ...

  5. Luogu P1156 垃圾陷阱 DP

    f[i][j]表示在第i个垃圾,高度为j的最大生命值 转移分三部分: 如果j>=当前垃圾的高度,且两个垃圾间的时间小于等于上一个状态f[i-1][j-a[i].v]的生命值,则可以垫高度 如果j ...

  6. phantomjs的和谷歌浏览器的简单使用

    一.phantomjs的简单使用 ''' 什么是phantomJs:无界面的浏览器 ''' from selenium import webdriver from time import sleep ...

  7. gitlab 日常运维命令

    2018-10-24 gitlab查看版本 cat /opt/gitlab/embedded/service/gitlab-rails/VERSION 查看gitlab服务状态命令 gitlab-ct ...

  8. Hash算法总结

    1. Hash是什么,它的作用 先举个例子.我们每个活在世上的人,为了能够参与各种社会活动,都需要一个用于识别自己的标志.也许你觉得名字或是身份证就足以代表你这个人,但是这种代表性非常脆弱,因为重名的 ...

  9. Java线程池详解（一）

    一.线程池初探 所谓线程池,就是将多个线程放在一个池子里面(所谓池化技术),然后需要线程的时候不是创建一个线程,而是从线程池里面获取一个可用的线程,然后执行我们的任务.线程池的关键在于它为我们管理了多 ...

  10. Android中的CardView使用

    Android 5.0 版本中新增了CardView,CardView继承自FrameLayout类,并且可以设置圆角和阴影,使得控件具有立体性,也可以包含其他的布局容器和控件. 1.配置build. ...