`
jinhonglin001
  • 浏览: 15110 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

angularjs ng-repeat指令

 
阅读更多

      对于遍历一个数组或对象已经不陌生了,而在angularjs中也是有遍历的方法,即ng-repeat指令。

一、遍历数组

直接给例子:

a:

<ul><li ng-repeat =' number in [1,2,3]'>{{number}}</li><ul>

 这样输出的结果就是依次输出1,2 ,3

b:

<!DOCTYPE html>
<html lang="en" ng-app = "myapp"  >
<head></head>
<body>
   <div ng-controller = "mycontroller">
   <button ng-repeat = "person in persons">
  {{person.name}}
  {{person.age}}
  {{ $index}}
   </button>
  </div>
</body>

 对应的controller

angular.module('myApp',[])  
        .controller(‘mycontroller’, function($scope) {  
            $scope.persons=
 [{name:'张三',age:'22'},{name:李四,age:34},{name:'王五',age:'20'}];  
})

 会依次在页面上显示三个button,上面依次为0 张三 22 ,1 李四 34 ,2 王五 20

$index为数组的索引

分享到:
评论

相关推荐

    angularjs,ng-repeat循环渲染时,无法获取dom对象.pdf

    在AngularJS中,`ng-repeat`是用于循环渲染HTML元素的一个指令,它能够帮助开发者根据数组或者对象集合的内容重复渲染出一组DOM元素。然而,在使用`ng-repeat`进行渲染的过程中,有时候开发者会遇到无法直接获取到...

    AngularJs ng-repeat必须注意的性能问题

    在AngularJS中,`ng-repeat`是一个非常常用且强大的指令,用于动态地渲染列表或集合中的数据。然而,如果不注意一些关键的性能问题,它可能会成为应用性能瓶颈。以下是对`ng-repeat`性能优化的详细分析和建议: 一...

    通过angularjs的ng-repeat指令看scope的继承关系

    在AngularJS中,`ng-repeat`是一个非常重要的指令,它用于循环遍历数据集合,并将每个元素渲染到视图上。这个过程涉及到AngularJS的核心概念之一——Scope,它是应用程序中的数据模型,也是连接视图和控制器的桥梁。...

    AngularJS ng-repeat指令及Ajax的应用实例分析

    本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考,具体如下: ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。 定义: &lt;element ng-repeat=expression&gt; 说明...

    AngularJS使用ng-repeat指令实现下拉框

    下面给大家分享在项目中使用ng-repeat指令实现下拉框。 1、问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...

    AngularJs ng-repeat 嵌套如何获取外层$index

    在AngularJS中,`ng-repeat`指令用于迭代一个数组或对象集合,并在DOM中重复生成元素。当`ng-repeat`嵌套使用时,即在一个`ng-repeat`内部再使用另一个`ng-repeat`,我们可能会遇到需要访问外层循环变量的需求,比如...

    AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

    在AngularJS中,`ng-repeat`是一个非常重要的指令,用于迭代数组或对象集合,并将它们渲染为DOM元素。然而,当遍历的数据源包含重复元素时,`ng-repeat`会抛出一个错误:“Error: [ngRepeat:dupes] Duplicates in a ...

    angularjs ng-class

    `ng-class`的一个常见应用场景是与其它AngularJS指令结合,如`ng-repeat`,在循环中根据每个项目的状态来改变样式。例如,我们可以标记列表项中的选中项目: ```html &lt;li ng-repeat="item in items" ng-class="{...

    angularjs过滤器--filter与ng-repeat配合有奇效

    总之,AngularJS过滤器-filter与ng-repeat指令的结合使用,极大地提升了Web应用的交互性和用户体验。在构建数据表格和列表时,这种配合使用可以有效地过滤和展示大量数据,使用户能够更轻松地找到他们需要的信息。...

    AngularJS基础 ng-repeat 指令简单示例

    在AngularJS框架中,ng-repeat指令的基本语法格式如下: ```html &lt;element ng-repeat="expression"&gt; ``` 这里,`&lt;element&gt;`代表任意HTML标签,`expression`代表表达式,用于指定要循环的数组或对象。AngularJS通过...

    Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式。 例如: index.html &lt;div class=uk-panel ng-controller=UserCtrl&gt; &lt;ul class=uk-list&gt; &lt;li ng-repeat-start=...

    AngularJS实战之ng-repeat的详细用法

    总结,`ng-repeat`是AngularJS中非常强大的指令,它可以处理各种数据结构,提供丰富的扩展选项,如过滤、排序、分组和索引访问,同时支持自定义迭代器和性能优化策略。在实际开发中,熟练掌握`ng-repeat`的使用能极...

    Angularjs中ng-repeat的简单实例

    在讲解AngularJS中ng-repeat指令的使用实例之前,我们需要先对AngularJS和ng-repeat指令做一个基本的了解。 AngularJS是Google开发的一个开源的前端JavaScript框架,用来开发动态网页。它通过HTML的扩展(即所谓的...

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS中,ng-repeat是一个指令,用于在HTML模板中重复生成一组元素。在使用ng-repeat的过程中,往往需要为每个生成的元素绑定一个模型(model),以便收集用户输入的数据。在某些场景下,ng-model的值是动态生成...

    AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法

    在AngularJS中,`ng-repeat`指令用于循环遍历数组或对象,生成DOM元素,它在构建可重用和动态的UI组件时非常有用。在本例中,开发者遇到的问题是在`ng-repeat`循环中包含动态HTML,这些HTML中还嵌套了自定义指令。...

    关于AngularJS中ng-repeat不更新视图的解决方法

    通过在ng-repeat指令后添加track by $index,可以指定AngularJS使用索引作为元素的唯一标识符。这样,无论数组如何更新,AngularJS都能通过索引来正确追踪每个元素的变动,确保视图能够正确反映数据的最新状态。 ...

    ng-repeat-owl-carousel:在 AngularJS ng-repeat 中初始化 Owl Carousel 的指令

    ng-repeat 猫头鹰旋转木马在 AngularJS ng-repeat 中初始化 Owl Carousel 的指令#下载 ##NPM npm install ng-repeat-owl-carousel --save ##鲍尔bower install ng-repeat-owl-carousel --save #Usage 将源文件添加到...

Global site tag (gtag.js) - Google Analytics