zoukankan      html  css  js  c++  java
  • anngular ng-repeat循环

    <html ng-app="myApp">
    <head>
    <title>angularjs-demo</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.js"></script>
    </head>
    <body ng-controller="ctrl">
     <div class="table-responsive">
                <table class="table table-striped table-sm">
                  <tbody>
                    <thead>
                    <tr>
                      <th>课程</th>
                      <th>网址</th>
                      <th>学籍</th>
                     
                    </tr>
                  </thead>
                    <tr ng-repeat="item in items">
                      <td>{{item.Name}}</td>
                      <td>{{item.Url}}</td>
                      <td>{{item.Country}}</td>
                     
                    </tr>
                    <tr>
                      <td>1,002</td>
                      <td>amet</td>
                      <td>consectetur</td>
                    </tr>
                    
                  </tbody>
                </table>
              </div>
            </main>
          </div>
        </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller("ctrl",function($scope,$location){
            $scope.items = getStu();
        });
        
        function getStu() {
            return [ {
                "Name": "菜鸟教程",
                "Url": "www.runoob.com",
                "Country": "CN"
            },
            {
                "Name": "Google",
                "Url": "www.google.com",
                "Country": "USA"
            },
            {
                "Name": "Facebook",
                "Url": "www.facebook.com",
                "Country": "USA"
            },
            {
                "Name": "微博",
                "Url": "www.weibo.com",
                "Country": "CN"
            }];
        }
        </script>
    </body>
    </html>
    <!--  {
        "sites": [
            {
                "Name": "菜鸟教程",
                "Url": "www.runoob.com",
                "Country": "CN"
            },
            {
                "Name": "Google",
                "Url": "www.google.com",
                "Country": "USA"
            },
            {
                "Name": "Facebook",
                "Url": "www.facebook.com",
                "Country": "USA"
            },
            {
                "Name": "微博",
                "Url": "www.weibo.com",
                "Country": "CN"
            }
        ]
    } -->
  • 相关阅读:
    Oracle SQL语句大全—查看表空间
    Class to disable copy and assign constructor
    在moss上自己总结了点小经验。。高手可以飘过 转贴
    在MOSS中直接嵌入ASP.NET Page zt
    Project Web Access 2007自定义FORM验证登录实现 zt
    SharePoint Portal Server 2003 中的单一登录 zt
    vs2008 开发 MOSS 顺序工作流
    VS2008开发MOSS工作流几个需要注意的地方
    向MOSS页面中添加服务器端代码的另外一种方式 zt
    状态机工作流的 SpecialPermissions
  • 原文地址:https://www.cnblogs.com/zgqdbxb/p/9501219.html
Copyright © 2011-2022 走看看