`

angularJS 弹出层

阅读更多
1、页面
<div ng-controller="detailCtrl">
    <pane class="detail-body" animation="animation" >
      <div class="tab-content">
        <div class ="detail-row">
            <div class="detail-header">
               <table class="table">
                 <tr>
                   <td><a>{{detailData.name}}</a></td>
                   <td>{{detailData.tenant}}</td>             
                 </tr>
               </table>
            </div>
            <div class="detail-title">
              <a class = "an-close" ng-href="/cvm/volumes"><i class="iconfont icon-awmailreply"></i></a>
              <span>云硬盘详情</span>
            </div>
            <div class="detail-info">
              <table class="table table-info">
                <tr>
                  <td>云硬盘名称</td>
                  <td>{{detailData.name}}</td>
                  <td>项目名称</td>
                  <td>{{detailData.tenant}}</td>
               </tr>
              </table>  
            </div>
        </div>
          
      </div>
    </pane>
  </div>

2、页面url
<td data-title="'云硬盘名称'" sortable="'name'">
  <a ng-href="/cvm/volumes?id={{volume.id}}">{{volume.name}}</a>
 </td>

3.js代码
$rootScope.$on('getDetail',function(event,value){
    volumesDataSrv.detailVolumeData(value).then(function(result){
      $scope.detailData = result.data[0];
    });
  })
分享到:
评论
1 楼 haoningabc 2016-06-28  
前后端都会啊,全栈女神啊

相关推荐

    弹出层示例或一个页面多处弹出层

    3. 前端框架:如Bootstrap、AngularJS、Vue.js等提供了弹出层组件,简化开发过程。 四、多处弹出层的管理 在一个页面上有多个弹出层时,需注意以下几点: 1. 层级管理:确保不同弹出层之间不会重叠或相互遮挡,...

    页面弹出层 提示框

    弹出层的实现方式多样,常见的有JavaScript库和框架,如jQuery UI、Bootstrap、AngularJS等。这些工具提供了丰富的API和预设样式,可以方便地创建各种类型的弹出层。此外,HTML5引入了`&lt;dialog&gt;`元素,它是一个内置...

    angularjs创建弹出框实现拖动效果

    本文将会详细介绍如何在AngularJS框架下创建可拖动的弹出框。AngularJS是一个通过数据绑定来扩展HTML的JavaScript框架,它允许开发者使用HTML作为模板语言,通过特定的AngularJS指令来表达应用程序的动态视图。模态...

    java dialog弹出层实例

    - AngularJS、React和Vue.js等现代前端框架也提供了创建组件化对话框的功能,通过组件状态管理和生命周期方法实现对话框的打开、关闭和数据交换。 6. **文件"dialog"** - 压缩包中的"dialog"文件可能是一个JSP...

    弹出浮动层

    在网页开发中,实现弹出浮动层的技术有多种,如JavaScript库(如jQuery UI)、框架(如AngularJS或Vue.js)以及专门的插件(如SweetAlert或Bootstrap Modal)。这些工具和库提供了方便的方法来创建、定位和管理浮动...

    Responsive Web Design with AngularJS

    - **双向数据绑定**:AngularJS中的数据绑定是自动且双向的,即视图层到模型层的数据更改以及模型层到视图层的数据更改都无需手动编写同步代码。 - **依赖注入**:AngularJS采用依赖注入(Dependency Injection)的...

    Ionic AngularJS API

    - **Keyboard**:键盘相关功能,如键盘弹出事件监听。 - **Lists**:列表组件,用于展示有序或无序的数据项。 - **Loading**:加载指示器。 - **Modal**:模态视图控制器。 - **Navigation**:导航组件。 - **...

    angular-popups浮动框

    基于 AngularJS 的浮层组件,由 artDialog 演进而来。 使用 AngularJS 自带的ng-if、ng-show、ng-hide控制浮层的显示与隐藏 支持 ARIA 规范、无障碍焦点管理、快捷键关闭 完全基于 HTML 标签,高可定制化 可以指定...

    前端项目-ns-popover.zip

    “ns-popover”是基于AngularJS的自定义指令,它的主要功能是在页面元素上创建一个可自定义的弹出层,通常用于显示额外的信息或提供交互操作。这个项目为开发者提供了丰富的配置选项,可以自由定制气泡的位置、内容...

    Bootstrap与Angularjs的模态框实例代码

    3.Bootstrap模态框组件:Bootstrap模态框是一个可以通过用户的操作显示出来的弹出层。模态框通常用来展示信息、确认操作、提交表单等。模态框包括头部、内容和尾部三个部分。 4.Angularjs中如何实现Bootstrap模态框...

    AngularJS实现元素显示和隐藏的几个案例

    开发者可以利用ng-show和ng-hide指令或者自定义指令,来应对不同的业务场景,如菜单、弹出层或者上下文敏感的工具栏的显示和隐藏。通过控制器与视图的相互作用,AngularJS能够保证应用界面的动态变化总是与数据模型...

    AngularJS入门教程之MVC架构实例分析

    `$scope`对象在控制器中被初始化,设置默认的用户名和密码,并且定义了一个`login`方法,当用户点击“提交”按钮时,`ng-click`指令会触发这个方法,弹出对话框。 值得注意的是,AngularJS的控制器作用域是局部的,...

    网页中实现树加载和弹出页面值传回主窗口

    本主题主要探讨如何在网页中实现树的加载以及弹出窗口与主窗口之间的值传递,这对于提高用户体验和增强交互性至关重要。 首先,我们来详细了解一下“网页中树加载”。树加载通常涉及到JavaScript或者其库(如jQuery...

    AngularJS中一般函数参数传递用法分析

    当点击按钮时,将会弹出字符串`'value'`。 对于熟悉JavaScript和传统HTML事件处理的开发者来说,普通参数传递的方式会更加熟悉。虽然在AngularJS中推荐使用模型参数传递,因为这样能够更好地利用AngularJS的数据...

    AngularJS对动态增加的DOM实现ng-keyup事件示例

    如果确认是回车键,则弹出提示框显示输入内容,并清空输入框。 7. AngularJS的其他知识点 除了上述内容,AngularJS还提供了许多其他功能和概念,比如控制器(Controllers)、服务(Services)、依赖注入...

    jQuery实现的页面遮罩层功能示例【测试可用】

    在这个示例中,有两个主要部分:一个用于触发遮罩层的`&lt;section&gt;`元素(`fh-link-bar`类)和一个隐藏的弹出层(`.personsex`类)。弹出层包含三个选项供用户选择性别。 2. **CSS样式**: CSS定义了页面的外观。`....

    angularjs模态框的使用代码实例

    模态框通常在页面背景上覆盖一个半透明层,焦点集中在弹出的对话框中。在本文中,我们将深入探讨如何使用AngularJS实现模态框的功能,并通过具体的代码实例进行讲解。 首先,让我们了解模态框的基本结构。在HTML...

    angualrjs前端页面一整套

    Layer则是一个基于Bootstrap的弹出层插件,用于创建各种类型的提示、对话框和弹窗。它提供了丰富的配置选项和动画效果,使得在前端页面上添加反馈和通知变得简单而美观。 商家后台和运营商后台通常包含订单管理、...

    javascript简单图片库

    JavaScript图片库常通过创建一个浮动的弹出层或者使用模态对话框来实现这一功能,同时提供关闭按钮和缩放控制。 此外,图片缩放和旋转也是常见需求。JavaScript图片库会提供API来处理图片的缩放和平移操作,通常...

    Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

    页面代码: &lt;!-- 弹出层 --&gt; 通讯录 ()&gt; &lt;div class=phone ng-repeat=User i

Global site tag (gtag.js) - Google Analytics