AngularJS使用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程序设计有所帮助。

赞 (0)

相关推荐

  • Angular.JS中指令ng-if的注意事项小结

    前言 ng-if指令可以根据表达式的值true/false在DOM中真正生成或真正移除一个元素.如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中. ng-if同ng-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移除节点. 当一个元素被ng-if从DOM中移除,同它关联的作用域也会被销毁.而且当它重新加入DOM中时,会通过原型继承从它的父作用域生成一个新的作用域. 这样会导致

  • Angular.js中ng-if、ng-show和ng-hide的区别介绍

    Angular.js中ng-if、ng-show和ng-hide的区别介绍

    前言 大家都知道在使用anularjs开发前端页面时,常常使用ng-show.ng-hide.ng-if功能来控制页面元素的显示或隐藏,那他们之间有什么不同呢?下面通过这篇文章来一起看看吧. 实现原理 ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏,对应的DOM元素会一直存在于当前页面中,而ng-if根据表达式的值动态的在当前的页面中添加删除页面元素.如果赋值表达式的值为false,那么这个元素就会从页面中删除,否则会添加一个元素.ng-if创建元素时用的是被它编译后的

  • AngularJS基础 ng-if 指令用法

    AngularJS ng-if 指令 AngularJS 实例 取消选中,并移除内容: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <b

  • Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

    前言 最近在做一个项目改版,第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的,感觉非常的新鲜.有几个指令是经常用到的,这里由于这几个有点共性,所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令.下面来看看详细的介绍: 共性 1.这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法,使用起来非常方便,尤其是做业务逻辑. 2.都是通过一个表达式的值来实现切换显示的,只不过 ng-switch 可以

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

    AngularJS使用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&quo

  • angularJs在多个控制器中共享服务数据的方法

    如下所示: <div ng-app="module"> <div ng-controller="ctrl1"> <table border="1" width="600"> <tr> <td>网站名称</td> <td>网址</td> </tr> <tr ng-repeat="v in data.webs

  • 基于AngularJS实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改

  • angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态.分享给大家供大家参考,具体如下: html部分: <table> <thead> <tr > <th width="40px;">序号</th> <th>班次</th> <th>分组</th> <th>操作</th> </tr> </thead>

  • 小谈angular ng deploy的实现

    Angular CLI 在 8.3.0 发布过一个新命令 ng deploy,可以将 Angular 应用部署到远程服务器或云存储上面,例如:Firebase hosting.Azure.GitHub pages等等,这也是算是 Angular CLI 最后一个将 Angular 应用从开发到部署打通全能选手工具了. 快速入门 这里我以ng-deploy-oss为示例,演示如何将 Angular 应用部署到七牛云. 1.创建一个新项目 ng new hello-world --defaults

  • AngularJS 教程及实例代码

    angularjs 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

  • AngularJS实用开发技巧(推荐)

    AngularJS实用开发技巧(推荐)

    一.开端 Angular JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与jQuery 配合良好. 二.基础原则了解 ①angular的一些入门了解 一.基础知识 1.angular放弃了IE8 2.四大核心分别是mvc.模块化.指令系统.双向数据绑定 二.一些原则 1.不要复用controller,一个控制器一般只负责一小块视图. 2.不要在controller里面操作

  • Angularjs的启动过程分析

    Angularjs的启动过程分析

    本文介绍了Angularjs的启动过程分析,分享给大家 启动过程(v1.3.9) 步骤一 用自执行函数的形式让整个代码在加载完成之后立即执行 in angular.js Line6 (function(window, document, undefined) 在window上暴露一个唯一的全局对象angular,Line250 angular = window.angular || (window.angular = {}) 获得其它工具模块 Line 2129 function publish

  • AngularJS基础学习笔记之简单介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中. AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库. AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中: 复制代码 代码如下: <scri

  • AngularJs每天学习之总体介绍

    AngularJs每天学习之总体介绍

    这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题. 1.基本概念: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事,通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足. 2.版本 angualrjs1.x:目前比较稳定版

随机推荐