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 相关文章推荐
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
JS排序之快速排序详解
Apr 08 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
pycharm永久激活超详细教程
2020/10/29 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
团队队名口号大全
2014/06/06 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书