AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
更新时间：2016年12月13日 14:28:20 作者：小小小小小亮
这篇文章主要介绍了AngularJS使用ng-repeat和ng-if实现数据的删选显示效果,非常适用于表单数据的显示使用,涉及ng-repeat和ng-if命令的相关使用技巧,需要的朋友可以参考下
本文实例讲述了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>
显示效果如下：
2.此时的问题是，如果我们要删选的是部门为“产品部”的员工
那么可以使用ng-repeat+ng-if的方法，这样可以实现简单的前端删选
我们只需要在ng-repeat后面简单的加上ng-if="member.partment=='产品部即可'"
代码修改如下：
<tr ng-repeat="member in data" ng-if="member.partment=='产品部'">
效果为：
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
下面小编就为大家带来一篇浅谈angularjs中响应回车事件。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了Angular 常用指令实例总结整理的相关资料,本文整理了常用指令，大家可以参考使用，需要的朋友可以参考下2016-12-12
最近在使用angular来做项目，功能要求实现一是点击按钮获取验证码，二是点击登录验证表单。之前用jquery来做项目很好做，使用angular怎么实现呢？其实实现代码也很简单的，下面通过实例代码给大家介绍下，需要的朋友参考下吧2017-05-05
本篇文章主要介绍了详解angularjs 学习之 scope作用域，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
将angular.js项目整合到.net mvc中的方法详解
这篇文章主要给大家介绍了将angular.js项目整合到.net mvc中的相关资料，文中通过示例代码将实现的过程介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-06-06
这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了AngularJS入门教程（零）：引导程序,本文是系列文章中的一篇,本系列文章用开发一个AngularJS应用来讲解,需要的朋友可以参考下2014-12-12
下面小编就为大家分享一篇angularJS的radio实现单项二选一的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文主要介绍 Ubuntu系统下Angularjs开发环境安装，这里详细介绍了安装步骤和注意事项，有在Ubuntu 环境下开发的朋友可以参考下2016-09-09
这篇文章主要介绍了再谈Angular4 脏值检测(性能优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论