AngularJS——7、表格

最新推荐文章于 2020-06-26 23:02:31 发布

MF-Bee

最新推荐文章于 2020-06-26 23:02:31 发布

阅读量195

点赞数

分类专栏： AngularJS 文章标签： AngularJS

本文链接：https://blog.csdn.net/AFencounter/article/details/103559915

版权

AngularJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ng-repeat 显示表格，可以添加过滤器（如：orderBy、uppercase等）进行操作。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">    
        <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="xxApp" ng-controller="xxCtrl"> 
            <table>
                <tr ng-repeat="x in names | orderBy : x.City">
                    <td>{{ x.Name }}</td>
                    <td>{{ x.City }}</td>
                    <td>{{ x.Country | uppercase }}</td>
                </tr>
            </table>
        </div>
        <script>
            var app = angular.module('xxApp', []);
            app.controller('xxCtrl', function($scope, $http) {
                $http.get("/xxJSON.php")
                     .success(function(response) {
                         $scope.names = response;
                      });
            });
        </script> 
    </body>
</html>

输出：

（xxJSON.php见 AngularJS——5、Http ）

css样式如下：

<style>
table, th, td  {
  border: 1px solid gray;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd)	{
  background-color: #FFFAFA;
}
table tr:nth-child(even) {
  background-color: #E0FFFF;
}
</style>

MF-Bee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS——7、表格

ng-repeat 显示表格，可以添加过滤器（如：orderBy、uppercase等）进行操作。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="//apps.bdimg.com/libs/angular....
复制链接

扫一扫

专栏目录