首先要有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. 190308python-MySQL

    一.Python连接MySQL import pymysql conn = pymysql.connect(host='192.168.100.4', port=3306, user='dongfei ...

  2. webpack（二）解析es6并打包

    一.前言 ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现.Babel是一个广泛使用的转码器, ...

  3. [WebShow系列] 固定展示界面的现场调用

    正在制作......,敬请期待. 固定展示界面的现场调用 现场管理员通过现场控制台可以控制主展示界面,实现 主题 所选选手展示 所选选手打分展示 排行展示 详情排行展示 柱状图展示 界面的展示切换外, ...

  4. office 2013 破解工具 及 软件下载

     win7/win8/win10  office2013 破解工具 下载地址: https://pan.baidu.com/s/1sZeJOCWq1fZ3KIOWvmrAQQ office2013  ...

  5. Servlet记录

    [Servlet]java语言编写动态资源的开发技术,普通的java类 [转发与重定向的区别] 转发在服务器端完成的:重定向是在客户端完成的 转发的速度快:重定向速度慢 转发的是同一次请求:重定向是两 ...

  6. 【语义分割】large kernel matters中GCN模块的pytorch实现

    GCN模块的实现比较简单,在giuhub上看到两种实现,轻微不同 实现一:https://github.com/ycszen/pytorch-segmentation/blob/master/gcn. ...

  7. oracle数据库操纵语言DML

    oracle数据库操纵语言:DML 添加数据: ()直接添加数据: insert into table_name(column_name1,column_name2,...) values(data1 ...

  8. HOW TO MAKE IT FLOW ?

      FLEXnet Licensing is a member of the FLEXnet Publisher family of products. It is the most popular ...

  9. 1137 Final Grading （25 分）

    For a student taking the online course "Data Structures" on China University MOOC (http:// ...

  10. vim(二) 代码查看

    ctags,cscope 查看代码 生成cscope脚本文件 #!/bin/bash if [ -f "*.cscope" ]; then rm -fr *.cscope fi i ...