AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】


Posted in Javascript onDecember 13, 2016

本文实例讲述了AngularJS使用ng-repeat和ng-if实现数据的删选显示效果。分享给大家供大家参考,具体如下:

1.首先重复回顾一下ng-repeat指令

ng-repeat可以实现内容的重复显示,比如我们可以写如下代码

<script>
  angular.module("myapp",[]).controller("mycontroller",function($scope){
    $scope.data=[{name:"yu1",age:10,partment:"产品部"},
          {name:"yu2",age:11,partment:"产品部"},
          {name:"yu3",age:12,partment:"事业部"},
          {name:"yu4",age:13,partment:"事业部"},
          {name:"yu5",age:14,partment:"物资部"},
          {name:"yu6",age:15,partment:"物资部"}
         ]
   })
</script>
<div class="table-responsive">
  <table class="table table-bordered">
     <thead>
       <th>姓名</th>
       <th>年龄</th>
       <th>部门</th>
     </thead>
   <tbody>
    <tr ng-repeat="member in data">
       <td>{{member.name}}</td>
       <td>{{member.age}}</td>
       <td>{{member.partment}}</td>
    </tr>
   </tbody>
  </table>
</div>

显示效果如下:

AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】

2.此时的问题是,如果我们要删选的是部门为“产品部”的员工

那么可以使用ng-repeat+ng-if的方法,这样可以实现简单的前端删选

我们只需要在ng-repeat后面简单的加上ng-if="member.partment=='产品部即可'"

代码修改如下:

<tr ng-repeat="member in data" ng-if="member.partment=='产品部'">

效果为:

AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 #Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 #Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 #Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 #Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 #Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 #Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
浅析vue数据绑定
2017/01/17 Javascript
js模拟微博发布消息
2017/02/23 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python切片操作深入详解
2018/07/27 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
PHP面试题及答案一
2012/06/18 面试题
SQL Server面试题
2013/04/04 面试题
升职自荐书范文
2013/11/28 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
企业读书活动总结
2014/06/30 职场文书
社区活动总结范文
2015/05/07 职场文书
喋血孤城观后感
2015/06/08 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Django中celery的使用项目实例
2022/07/07 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS