• 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存储过程中的性能瓶颈点》PPT&视频
    警示:一个update语句引起大量gc等待和业务卡顿
    周末直播丨细致入微
    Java VS Python:哪个未来发展更好?
    【LeetCode】279.完全平方数(四种方法,不怕不会!开拓思维)
    事件驱动
    Android初级教程以动画的形式弹出窗体
    Android简易实战教程--第五话《开发一键锁屏应用》
    迎战大数据-Oracle篇
    Android初级教程获取手机位置信息GPS与动态获取最佳方式
  • 原文地址:https://www.cnblogs.com/zgqdbxb/p/9501219.html
Copyright © 2020-2023  润新知