Agularjs妙用双向数据绑定实现手风琴效果

最近在工作总遇到需要实现类似手风琴效果的需求,如下图所示:

因为汇总(上半部分)和明细(下面的浅色部分)在不同的情况下显示的字段数量是不一样的,而且还有编辑和展示的状态切换,所以需要自己实现手风琴效果。

初步的想法是用css的transform做动效,点击详情按钮(或中间部分的下拉图标)时请求详情数据,然后将详情部分的height设置成指定高度,再次点击详情按钮(或中间部分的下拉图标),详情部分被收起。

但是这样的问题在于我们如何精确的控制到底该显示哪一行汇总数据的明细和关闭其他行的明细,经过一番思考我决定利用一下双向数据绑定来帮我完成这个事情。具体代码如下:

js:

$scope.toogleShowDtl = function (item, e) {
       //阻止事件冒泡
       e.stopPropagation();
      for (var i = 0; i < $scope.OrderHdr.length; i++) {
        if ($scope.OrderHdr[i].Bill_Hdr_Id != item.Bill_Hdr_Id) {
          $scope.OrderHdr[i].mxShow = false;
          $scope.OrderHdr[i].iconChange = "glyphicon glyphicon-menu-down";
        }
      }
      switch (item.mxShow) {
        case undefined:
          item.mxShow = true;
          item.iconChange = "glyphicon glyphicon-menu-up";
          break;
        case true:
          item.mxShow = false;
          item.iconChange = "glyphicon glyphicon-menu-down";
          break;
        case false:
          item.mxShow = true;
          item.iconChange = "glyphicon glyphicon-menu-up";
          break;
        default:
          item.mxShow = false;
          item.iconChange = "glyphicon glyphicon-menu-down";
          break;
      }
    }

html:

<div class="col-sm-12 detial_box" ng-click="selectHdr($index)" ng-class="{ dtl_select : $index == selectedIndex }">
  <div class="col-sm-3" style="margin-top:60px; ">
   <button class="btn btn-primary" ng-click="toogleShowDtl(o,$event)">详情</button>
  </div>
  <div class="down_img">
    <span class="{{o.iconChange}} glyphicon glyphicon-menu-down" ng-click="toogleShowDtl(o,$event)"></span>
  </div>
</div>
<div class="col-sm-12 mx_box check-element animate-show-hide" ng-show="o.mxShow">
  <!--明细内容-->
</div>

当点击事件触发的时候,当前行数据中并没有mxShow这个字段,故循环为其添加上该字段并赋值为false,当前被点击的行不能执行这个操作,否则第一次点击的时候改行的明细是不会展示的。后面的switch case语句保证了第一次点击mxShow没有值 以及mxShow值切换的问题。item.iconChange 的值是用来控制中间字体图标的切换,当明细没展示的时候图标是向下的,代表可以展开,当明细显示的时候图标向上,代表可以收起。

ng-show="o.mxShow" 根据mxShow的值来确定明细是否展示。

class="{{o.iconChange}} glyphicon glyphicon-menu-down"

用来切换图标

最终效果图如下(不知道怎么上传动图o(╯□╰)o)

以上所述是小编给大家介绍的Agularjs妙用双向数据绑定实现手风琴效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

    本文实例讲述了AngularJS框架双向数据绑定机制.分享给大家供大家参考,具体如下: 之前写的一篇<AngularJS入门示例之Hello World详解> ,介绍ng-model的时候提到:使用AngularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能.现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的.越是感受到框架功能的强大,越是能够激发学习的兴趣和动力. 假如我们有一个学生信息列表,包含学生的姓名.地址和年龄信息.假如这个数

  • angularjs学习笔记之双向数据绑定

    这次我们来详细讲解angular的双向数据绑定. 一.简单的例子 这个例子我们在第一节已经展示过了,要看的移步这里 这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容.这就实现了数据双向绑定. 二.取值表达式与ng-bind的使用 我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现"{{greeting.text}} {{text

  • AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图. 下面的demo演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</titl

  • Agularjs妙用双向数据绑定实现手风琴效果

    最近在工作总遇到需要实现类似手风琴效果的需求,如下图所示: 因为汇总(上半部分)和明细(下面的浅色部分)在不同的情况下显示的字段数量是不一样的,而且还有编辑和展示的状态切换,所以需要自己实现手风琴效果. 初步的想法是用css的transform做动效,点击详情按钮(或中间部分的下拉图标)时请求详情数据,然后将详情部分的height设置成指定高度,再次点击详情按钮(或中间部分的下拉图标),详情部分被收起. 但是这样的问题在于我们如何精确的控制到底该显示哪一行汇总数据的明细和关闭其他行的明细,经过一

  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

  • Nautil 中使用双向数据绑定的实现

    虽然是基于 react 的框架,但是在 nautil 中可以使用双向数据绑定,这得益于基于观察者模式的开发思路.在 react 中使用双向绑定并非没有需求,react 严格的单向数据流,严重影响了开发者的发挥空间,特别是在表单组件的使用中,很容易陷入回调地狱,即使 redux 也无法避免. 现有状态管理的问题 我们都知道,react 是单向数据流的,数据只能从外部通过 props 传入,再通过 props 上面传入的回调函数再传出去,直接修改 props 或者上面的对象,不会带来界面的更新,而且

  • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    1.使用Vue.js实现双向表单数据绑定,例子 <!--html代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r

  • vue双向数据绑定知识点总结

    1.原理 vue的双向数据绑定的原理相信大家都十分了解:主要是通过ES5的Object对象的defineProperty属性:重写data的set和get函数来实现的 所以接下来不使用ES6进行实际的代码开发:过程中如果函数使用父级this的情况:还是使用显示缓存中间变量和闭包来处理:原因是箭头函数没有独立的执行上下文this:所以箭头函数内部出现this对象会直接访问父级:所以也能看出箭头函数是无法完全替代function的使用场景的:比如我们需要独立的this或者argument的时候 1.

  • 使用Vue如何写一个双向数据绑定(面试常见)

    1.原理 Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例.为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-model,v-bind 和v-click三个命令,其他命令也可以自行补充. 添加网上的一张图 2.实现 页面结构很简单,如下 <div id="app"> <form> <input

  • vue 双向数据绑定的实现学习之监听器的实现方法

    提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 发布订阅者模式(观察者),下面讲的就是数据劫持在代码中的具体实现. 1.先看如何调用 new一个对象,传入我们的参数,这个Myvue ,做了啥? 上面看到了在实例化一个Myvue 对象的时候,会执行init方法, init 方法做了两个事,调用了observer 方法,和 实例化调用了 compile 方法. 到这里我们就明白了,实例化一个Myvue后,我们要做的就是监听数据变化和编译模板 . 上面O

  • vue实现的双向数据绑定操作示例

    本文实例讲述了vue实现的双向数据绑定操作.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>经典的双向数据绑定</title> <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script> &

随机推荐