angularjs中ng-repeat的使用

魔豆發表於2016-09-14
AngularJS

第一個例子：使用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>

 

相關文章