Angularjs中ng-repeat的简单实例

来源：动视网责编：小采时间：2020-11-27 22:31:41

Angularjs中ng-repeat的简单实例

Angularjs中ng-repeat的简单实例:Angularjs中ng-repeat的简单实例第一个例子：使用ng-repeat最简单的例子 <html ng-app=myApp> <head> <title>angularjs-demo</title> <script type=text/javascript src

推荐度：

点击下载本文 文档为doc格式

导读Angularjs中ng-repeat的简单实例:Angularjs中ng-repeat的简单实例第一个例子：使用ng-repeat最简单的例子 <html ng-app=myApp> <head> <title>angularjs-demo</title> <script type=text/javascript src

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>

Angularjs中ng-repeat的简单实例

推荐度：

点击下载本文 文档为doc格式

标签：实例 angularjs 简单示例

热门焦点

Angularjs中ng-repeat的简单实例

Angularjs中ng-repeat的简单实例

Angularjs中ng-repeat的简单实例

最新推荐

猜你喜欢

热门推荐