Angularjs中ng-repeat的简单实例_网络技术_宿州市腾雀网络科技有限公司

Angularjs中ng-repeat的简单实例

发布时间 - 2026-01-11 02:57:52 点击率：次

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

# angularjs中ng-repeat的使用 # AngularJS # 中ng-repeat的实例详解 # AngularJS基础 ng-repeat 指令简单示例 # AngularJS监听ng-repeat渲染完成的方法 # asp.net Repeater取得CheckBox选中的某行某个值的c#写法 # asp.net Repeater取得CheckBox选中的某行某个值 # ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容) # ng-repeat中Checkbox默认选中的方法教程 # 李四 # 王五 # 第一个 # 如有 # 希望能 # 第二个 # 谢谢大家 # 最简单 # 疑问请 # type # javascript # text

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何在Linux上配置高可用的容器编排工具监控

下一篇：如何在Golang中处理JSON请求与响应_解析和序列化数据

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何在Linux上配置高可用的容器编排工具监控

下一篇：如何在Golang中处理JSON请求与响应_解析和序列化数据