AngularJS表格详解及示例代码

格数据本质上通常是重复的。ng-repeat指令，可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。

  

   
Name
   
Marks
  
  

   
{{ subject.name }}
   
{{ subject.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;
}

例子

下面的例子将展示上述所有指令。

testAngularJS.html

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 Sample Application


Enter first name:

Enter last name: 

Name: 
{{student.fullName()}}
Subject:


  

   
Name
   
Marks
  
  

   
{{ subject.name }}
   
{{ subject.marks }}
  

输出

在Web浏览器打开textAngularJS.html，看到以下结果：

以上就是AngularJS表格基础知识的整理，后续继续整理相关知识，谢谢大家对本站的支持！