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. 从Cell类型转变成数据型

    我们有一个如下的cell数据 cdata = {'1' '11' '111' '1111' '11111'}; 现在要把他转变成double型的数组,很自然会想到的方法是cell2mat,可悲的是会遇 ...

  2. cocos2dx 3.2之Lua打飞机项目

    1          创建lua打飞机项目 cocos new T32Lua -dE:\Installed\cocos2d-x-3.2\cocos2d-x-3.2\projects -l lua 2 ...

  3. 3-sum问题

    给定一个整数数组,判断能否从中找出3个数a.b.c,使得他们的和为0,如果能,请找出所有满足和为0个3个数对. #define SIZE 10 void judgeAndPut(int* arr, i ...

  4. Java学习之栈和堆的区别

    在函数中定义的一些基本类型的变量和对象的引用变量都在函数的栈内存中分配. 当在一段代码块定义一个变量时,Java就在栈中为这个变量分配内存空间,当超过变量的作用域后,Java会自动释放掉为该变量所分配 ...

  5. 【移动开发】Service类onStartCommand()返回值和参数

    Android开发的过程中,每次调用startService(Intent)的时候,都会调用该Service对象的onStartCommand(Intent,int,int)方法,然后在onStart ...

  6. javascript之正则表达式

    创建正则表达式的两种方法 显式: new RegExp("pattern"[,"flags"]); 例 var regex = new ("abc&q ...

  7. python 远程调度进程服务与客户端

    python 远程调度进程服务与客户端 核心思想: 在本地或远程机器上创建一个进程,提供调度服务.使用了 APScheduler. 安装:APScheduler $ wget https://pypi ...

  8. EBS的性能调优

         metalink    Tuning performance on eBusiness suite (Doc ID 744143.1) 这篇文档描述了如何调查电子商务套件的整体性能下降. ...

  9. C++对C的函数拓展 - 占位参数

    函数占位参数 占位参数只有参数类型声明,而没有参数名声明 一般情况下,在函数体内部无法使用占位参数 demo #include <iostream> using namespace std ...

  10. hive中与hbase外部表join时内存溢出(hive处理mapjoin的优化器机制)

    与hbase外部表(wizad_mdm_main)进行join出现问题: CREATE TABLE wizad_mdm_dev_lmj_edition_result as select *  from ...