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>
  • 相关阅读:
    android ksoap2 访问webservice,连续两次调用时,第二次调用异常(转)
    iOS Programming – 触摸事件处理 (转)
    iPhone的解锁、越狱、激活、固件等等是什么意思,有什么分别?(转)
    pb中 执行动态sql
    Java的中文字体
    fastreport一些使用方法
    网页数据抓取
    base64
    TSelect
    解决DLL包组织的项目运行报 a class named Txxx exists
  • 原文地址:https://www.cnblogs.com/modou/p/5872378.html
Copyright © 2011-2022 走看看