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

(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )

AngularJS ng-repeat 指令

AngularJS 实例

循环输出多个标题:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

定义和用法


ng-repeat 指令用于循环输出指定次数的 HTML 元素。


集合必须是数组或对象。


语法


<element ng-repeat="expression"></element>


所有的 HTML 元素都支持该指令。


参数值


  
    
      值
      描述
    
    
      expression
      表达式定义了如何循环集合。

      

      表达式实例规则:

      

      x in records

      

      (key, value) in myObj

      

      x in records track by $id(x)
    
  


更多实例


AngularJS 实例


使用数组循环输出一个表格:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

运行结果：


  
    
      Alfreds Futterkiste
      Germany
    
    
      Berglunds snabbk
      Sweden
    
    
      Centro comercial Moctezuma
      Mexico
    
    
      Ernst Handel
      Austria
    
  


AngularJS 实例


使用对象循环输出一个表格:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

运行结果：


  
    
      Name
      Alfreds Futterkiste
    
    
      Country
      Germany
    
    
      City
      Berlin
    
  





以上就是对AngularJS ng-repeat 指令的基础资料整理，后续继续补充。

            
            上一篇：JS实现保留n位小数的四舍五入问题示例

            下一篇：JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

友情链接:杰晶网络 DDR爱好者之家南强小屋黑松山资源网白云城资源网网站地图 SiteMap