zoukankan      html  css  js  c++  java
  • AngularJS 表格

    1.  AngularJS 表格:ng-repeat指令可以完美显示表格。下面贴出代码。在显示表格的时候也可以使用过滤器。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular-1.3.15.min.js"></script>
            <style>
                table, th , td {
                      border: 1px solid grey;
                      border-collapse: collapse;
                      padding: 5px;
                }
                table tr:nth-child(odd) {
                      background-color: #f1f1f1;
                }            
                table tr:nth-child(even) {
                  background-color: #ffffff;
                }
            </style> 
        </head>
        <body>
            <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行-->
                <table>
                    <tr ng-repeat="x in names">
                        <td>{{x.Name}}</td>
                        <td>{{x.Url}}</td>
                        <td>{{x.Country}}</td>
                    </tr>
                </table>
            </div>
        
            <script>
                var app = angular.module("myApp", []);
                app.controller('myCtrl', function($scope,$http) { /*myCtrl是一个JavaScript函数*/
                    $http.get('file/sites.json')
                    .success(function(data){
                        $scope.names = data.sites;
                    })
                });
            </script>
        </body>
    </html>

  • 相关阅读:
    Webform服务器控件调用JS
    Webfrom基础知识
    Webform用户控件
    数组练习
    整理
    SVN分支与合并
    根据经纬度,获取两点间的距离
    简单Bat文件编写
    Maven Android使用一
    Maven环境配置
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6265584.html
Copyright © 2011-2022 走看看