AngularJS的ng-repeat显示表格

代码下载:https://files.cnblogs.com/files/xiandedanteng/angualrJSngRepeatTable.rar

代码:

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document title>
  <style>
    .odd{
        background-color:red;
        width:400px;
    }
    .even{
        background-color:#336699;
        width:400px;
    }
  style>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js">script>
 head>

 <body> 
    <table ng-controller="MainCtrl as ctrl">
        <tr ng-repeat="(author,member) in ctrl.members" ng-class="ctrl.getBackground({{$odd}})">
            <td>{{$index}}td>
            <td><span ng-bind='author'/>td>
            <td><span ng-bind='member.id'/>td>            
            <td><span ng-bind='member.gender'/>td>
            <td><span ng-bind='member.age'/>td>
        tr>
    table>
 body>
html>
<script type="text/javascript">

script>

效果:

AngularJS的ng-repeat显示表格_第1张图片

你可能感兴趣的:(AngularJS的ng-repeat显示表格)