AngularJS Table

<div ng-app="myApp" ng-controller="customersCtrl">
  <table>
       <tr ng-repeat="x in names">
             <td>{{ x.name }}</td>
              <td>{{ x.age }}</td>
        </tr>
   </table>
</div>
<script>
  var app=angular.module("myApp",[]);
   app.controller("customersCrtl",function($scope,$http)
   {
             $http.get("http:127.1.0.1/myweb/index.aspx").success(function(response)
                  {
                        $scope.names=response.records;

                   })

 });

</script>

添加样式：

<style>

        table,th,td{

              border:1px solid grey;

              border-collapse:collapse;

              padding:5px;

            }
          table tr:nth-child(odd){

              background-color:#flflfl;

             }

           table tr:nth-child(even){

              background-color:#ffffff;

              }

</style>

用orderBy过滤器：

<table>

     <tr ng--repeat="x in names|orderBy:age">

         <td>{{  x.name}}</td>

          <td>{{x.age}}</td>

      </tr>

</table>

用uppercase和lowercase过滤器：

<table>
  <tr ng-repeat="x in names">
           <td>{{ x.name |lowercase}}</td>
            <td>{{ x.age|uppercase }}</td>
   </tr>

</table>

在表格中显示序号:$index+1

<table>
      <tr ng-repeat="x in names">
           <td>{{$index+1}}</td>
            <td>{{x.name}}</td>
            <td>{{x.age}}</td>
         </tr>
</table>

使用$even和$odd

 <table>
    <tr ng-repeat="x in  names">
      <td ng-if="$odd" style="background-color:#f1f1f1">{{x.name}}</td>
      <td ng-if="$even">{{x.name}}</td>
      <td ng-if="$odd" style="background-color:#f1f1f1">{{x.age}}</td>
     <td ng-if="$even">{{x.age}}</td>
    </tr></table>

摘录自runoob.com。旨在通过自己的语言加深对AngularJS的学习、理解和记忆。