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

本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下：

ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。

定义：

说明：experssion表达式定义了如何循环集合。常用的如：x in records

下面通过一个例子,来说明ng-repeat如何绘制一个表格：

  

    

      
姓
      

    
    

      
名
      

    
    

      
名字
      
{{student.fullName()}}
    
    

      
科目
      

 

   

     
名字
     
标记
   
   

     
{{sub.name}}
     
{{sub.marks}}
   
 
      
    
  

表可以使用CSS样式设置样式。

  table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  table tr:nth-child(odd) {
    background-color: #f2f2f2;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }

利用angularjs的ng-repeat指令绘制表格:

效果：

上面例子表格中展示的数据也可以通过ajax请求从服务器中获取，然后利用ng-repeat指令插入到页面中，具体实现见下面代码:

  table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  table tr:nth-child(odd) {
    background-color: #f2f2f2;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }



  AngularJS 表格应用示例
  
    

      

 
姓
 

      
      

 
名
 

      
      

 
名字
 
{{student.fullName()}}
      
      

 
科目
 

   

     

名字
标记
     
     

{{sub.name}}
{{sub.marks}}
     
   
 
      
    
  
  

说明：需要放在服务器环境中运行

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。