angularjs中ng-repeat的使用

本文转载自查看原文 2016-09-14 15:18 4777 angular

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 angularJS中ng-repeat遍历对象 AngularJs ng-repeat中使用ng-model angularjs ng-repeat倒叙 angular中的方法ng-repeat的是使用 angularJS ng-repeat中的directive 动态加载template AngularJs 使用ng-repeat 时，去除重复项 AngularJS：如何使用自定义指令来取代ng-repeat AngularJS ng-repeat使用及注意事项解决AngularJS中ng-repeat不更新视图的问题使用angularjs中ng-repeat的$even与$odd属性时的注意事项