zoukankan      html  css  js  c++  java
  • angularjs中ng-repeat的使用

    第一个例子:使用ng-repeat最简单的例子

    <html ng-app="myApp">
    <head>
    <title>angularjs-demo</title>
    <script type="text/javascript" src="angular.min.js" charset="utf-8"></script>
    </head>
    <body ng-controller="ctrl">
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>分数</th>
      </tr>
      <tr ng-repeat="item in items">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.score}}</td>
      </tr>
    </table>
    <script>
        var app = angular.module('myApp',[]);
        app.controller("ctrl",function($scope,$location){
            $scope.items = getStu();
        });
        
        function getStu() {
            return [{id:1010,name:'张三',score:50},{id:1011,name:'李四',score:60},{id:1012,name:'王五',score:80}];
        }
        </script>
    </body>
    </html>

    第二个例子:添加过滤条件

    <html ng-app="myApp">
    <head>
    <title>angularjs-demo</title>
    <script type="text/javascript" src="angular.min.js" charset="utf-8"></script>
    </head>
    <body ng-controller="ctrl">
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>分数</th>
      </tr>
      <tr ng-repeat="item in items | filter:fscore">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.score}}</td>
      </tr>
    </table>
    <script>
        var app = angular.module('myApp',[]);
        app.controller("ctrl",function($scope,$location){
            $scope.items = getStu();
            $scope.fscore = function(e) {
                return e.score>=60;
            }
        });
        
        function getStu() {
            return [{id:1010,name:'张三',score:50},{id:1011,name:'李四',score:60},{id:1012,name:'王五',score:80}];
        }
        </script>
    </body>
    </html>
  • 相关阅读:
    Zigbee学习路线
    Zigbee简介
    验证lagrange 定理
    为什么(12)式,km不能直接相乘?而要让域k先乘一个代数A里面的单位元,再作用在群M上呢?
    strong weak distribution
    sufficient statistics
    tensorflow TypeError: Can not convert a float32 into a Tensor or Operation
    tensorflow 训练的时候loss=nan
    tensorflow run()和 eval()
    python array基本操作一
  • 原文地址:https://www.cnblogs.com/modou/p/5872378.html
Copyright © 2011-2022 走看看