AngularJS实现根据不同条件显示不同控件

由于项目需求,需要实现根据不同条件显示不同控件的功能。具体要求如下图所示:

即当选择“每单固定减”时,下方只显示“减免金额”一栏;

当选择“每单固定折扣”时,下方只显示“折扣比例”一栏;

当选择“每单满额减”时,下方只显示“满..减..”两栏。

根据自己对angular的了解,应该可以很轻松的实现此功能。

js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了。

用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。

当style.display="block"或style.visibility="visible"时控件可见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。

执行结果截图如下:

部分源码如下:

function displayHideUI()

{

var ui =document.getElementById("bbs");

ui.style.display="none";

}

function displayShowUI()

{

var ui =document.getElementById("bbs");

ui.style.display="";//display为空的话会好使,为block会使后边的空间换行

}

function visibilityHideUI()

{

var ui =document.getElementById("bbs");

ui.style.visibility="hidden";

}

function visibilityShowUI()

{

var ui =document.getElementById("bbs");

ui.style.visibility="visible";

}

</script>

值 描述

none 此元素不会被显示。

block 此元素将显示为块级元素,此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block 行内块元素。(CSS2.1新增的值)

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值compact,不过由于缺乏广泛支持,已经从CSS2.1 中删除。

marker CSS 中有值marker,不过由于缺乏广泛支持,已经从CSS2.1 中删除。

table 此元素会作为块级表格来显示(类似<table>),表格前后带有换行符。

inline-table 此元素会作为内联表格来显示(类似<table>),表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示(类似<tbody>)。

table-header-group 此元素会作为一个或多个行的分组来显示(类似<thead>)。

table-footer-group 此元素会作为一个或多个行的分组来显示(类似<tfoot>)。

table-row 此元素会作为一个表格行显示(类似<tr>)。

table-column-group 此元素会作为一个或多个列的分组来显示(类似<colgroup>)。

table-column 此元素会作为一个单元格列显示(类似<col>)

table-cell 此元素会作为一个表格单元格显示(类似<td>和<th>)

table-caption 此元素会作为一个表格标题显示(类似<caption>)

inherit 规定应该从父元素继承display属性的值。

AngularJS进阶(七)实现根据不同条件显示不同控件的更多相关文章

  1. Winform开发框架之肖像显示保存控件的实现

    我们在开发一些Winform程序的时候,除了常规的显示普通数据外,有的时候需要显示一些人员肖像或者一些车辆等物体的图片,一般这些内容较小,所以以二进制存储在数据库是一个不错的方案.但由于它们虽然很常用 ...

  2. 【转】silverlight telerik RadGridView 列头显示其他控件

    <telerik:GridViewDataColumn DataMemberBinding="{Binding target_id}" IsFilterable=" ...

  3. BitmapImage处理网络图片,例如阿里云获取的图片。异步加载到需要显示的控件上。提升速度非常明显。

    想直接把网络图片赋给控件,又要下载又要缓存,速度非常慢.不流畅. 需要进行处理,异步加载会显著提升速度.方法如下: public static BitmapImage ByteArrayToBitma ...

  4. 隐藏和显示服务器端控件以及Html控件

    隐藏和显示服务器端控件以及Html控件 /// <summary> /// 隐藏控件 /// </summary> /// <param name="contr ...

  5. 在FooterTemplate内显示DropDownList控件

    如果想在Gridview控件FooterTemplate内显示DropDownList控件供用户添加数据时所应用.有两种方法可以实现,一种是在GridView控件的OnRowDataBound事件中写 ...

  6. Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图

    Bing Maps进阶系列五:通过DeepEarth的MiniMap控件为Bing Maps扩展迷你小地图 Bing Maps Silverlight Control虽然为我们提供了简洁.方便的开发模 ...

  7. 使用Adorner显示WPF控件的边界点

    原文:使用Adorner显示WPF控件的边界点 当我们拖动WPF控件时,我们为了更清楚地需要显示控件,一般我们会在WPF控件所围成的矩形区域的四个边界点上作一个特殊的记号(比如圆点).如下图: 在Wi ...

  8. WPF通过不透明蒙板切割显示子控件

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Backspace110/article/ ...

  9. VS工具箱不显示DEV控件解决方法

    VS工具箱中不显示DEV控件解决方法 之前先装vs,再装dev控件,vs工具栏中自动会加载并显示dev相关组件,但是,在更新vs(我用2017版)后,原先安装好的dev控件库不显示在vs的工具栏中了. ...

随机推荐

  1. iOS下JS与OC互相调用(七)--Cordova 基础

    Cordova 简介 在介绍Cordova之前,必须先提一下PhoneGap.PhoneGap 是Nitobi软件公司2008年推出的一个框架,旨在弥补web 和iOS 之间的不足,使得web 和 i ...

  2. Android ListView中Item点击事件失效解决方案

    欢迎关注公众号,每天推送Android技术文章,二维码如下:(可扫描) 在平常的开发过程中,我们的ListView可能不只是简单的显示下文本或者按钮,更多的是显示复杂的布局,这样的话,我们就得自己写布 ...

  3. JAVA之旅(三十五)——完结篇,终于把JAVA写完了,真感概呐!

    JAVA之旅(三十五)--完结篇,终于把JAVA写完了,真感概呐! 这篇博文只是用来水经验的,写这个系列是因为我自己的java本身也不是特别好,所以重温了一下,但是手比较痒于是就写出了这三十多篇博客了 ...

  4. 安卓中的事件分发机制之View控件

    前言:Android 中与 Touch 事件相关的方法包括:dispatchTouchEvent(MotionEvent ev).onInterceptTouchEvent(MotionEvent e ...

  5. 【Unity技巧】自定义消息框(弹出框)

    写在前面 这一篇我个人认为还是很常用的,一开始也是实习的时候学到的,所以我觉得实习真的是一个快速学习工程技巧的途径. 提醒:这篇教程比较复杂,如果你不熟悉NGUI.iTween.C#的回调函数机制,那 ...

  6. Android开发技巧——实现底部图标文字的导航栏(已更新)

    本文章的导航栏代码参考了viewpagerindicator的实现.本文叙述的是之前版本的qq或微信中,底部的图标加文字的导航栏的实现. 2014-09-14 13:59:42更新:library的代 ...

  7. Mybatis接口编程原理分析(二)

    在上一篇博客中 Mybatis接口编程原理分析(一)中我们介绍了MapperProxyFactory和MapperProxy,接下来我们要介绍的是MapperMethod MapperMethod:它 ...

  8. List常用整理

            长期更新,主要记录List的各种常用操作整理. 对List进行排序 // Collections.sort(重写toString()进行排序区分) List<ObjectName ...

  9. 【一天一道LeetCode】#68. Text Justification

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  10. Linux搭建GIT 使用Eclipse创建并上传Git项目 EGit操作

    Linux搭建Git 1. gitblit服务器文档 http://gitblit.com/setup_go.html 2. 安装jdk 参考 http://blog.csdn.net/jerome_ ...