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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
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
PHPMailer安装方法及简单实例
2008/11/25 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python三元运算实现方法
2015/01/12 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python装饰器用法实例分析
2019/01/14 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
优秀毕业生推荐信范文
2014/03/07 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
行政撤诉申请书
2015/05/18 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Python实现视频中添加音频工具详解
2021/12/06 Python