温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Angularjs中ng-repeat的简单实例

发布时间:2020-09-17 17:21:34 来源:脚本之家 阅读:113 作者:魔豆 栏目:web开发

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-repent的使用实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI