当前位置:首页 > 日记 > 正文

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

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属性的值。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

如何隐藏与显示Word2010文档中的文

如何隐藏与显示Word2010文档中的文

文档,文字,显示,电脑软件,  隐藏文字其实是一种很不错的保护Word文档安全的方法,而且这种方法很少有人使用,大多数人一般会选择给文档加密。以下是小编为您带来的关于隐藏与显示Word2010文档中的文字,希望对您有所帮助。隐藏与显示Word2010…

wps文字怎么设置文字环绕

wps文字怎么设置文字环绕

文字,设置,步骤,方法,图片,  wps文字是word的替代品,是一款可以进行文字编辑的办公软件,我们再输入很长文档的时候要插入图片,这个时候,我们如何设置让文字环绕图片排列显示呢?下面小编来告诉你怎么设置文字环绕图片吧,希望对你有帮助!wps文字…

qq带名字的情侣签名

qq带名字的情侣签名

情侣,名字,大全,电脑软件,qq,  一句签名:如果我的生命只剩下一分钟,我会爱你到最后的一秒。下面小编给大家分享了关于qq带名字的情侣签名,希望你喜欢。qq带名字的情侣签名精选1) 不要跟我说未来,未来还未到来。2) 不要跟我说曾经,曾经只是曾经…

zTree获取当前节点的下一级子节点

zTree获取当前节点的下一级子节点

节点,子节点,实例,电脑软件,zTree,使用zTree插件实现树形图中,需要获取当前点击的父节点的子节点数的需求,使用treeNode.children获取子节点数据集合,使用length方法获取集合长度。将当前节点的treeNode传入即可调用。/*查找当前节点下一级的…

怎样在word2013中批量删除

怎样在word2013中批量删除

批量删除,电脑软件,  很多时候,我们需要将Word文档中的团片删除掉,只保留文字内容,不过由于文档中图片数量过多,一张一张删除太费事。那么下面就由小编给大家分享下word2013中批量删除图片的技巧,希望能帮助到您。word2013中批量删除图片的步…

手机QQ语聊大厅怎么同附近陌生人语

手机QQ语聊大厅怎么同附近陌生人语

语音,大厅,方法,陌生人,语聊,  在手机QQ附近的人应用中,有一款语聊大厅的功能,可以和附近陌生人语音群聊。下面小编就来体验一下手机QQ语聊大厅和附近陌生人语音群聊的方法。手机QQ语聊大厅同附近陌生人语音群聊的方法打开你最新版本的手机…

JavaScript自定义分页样式

JavaScript自定义分页样式

自定义,分页,样式,电脑软件,JavaScript,自定义分页样式,不多废话,直接上代码~ html部分<div id="my_id"> <div class="my_id"> <table style=""> <thead style=""> <tr> <td>购买日期</td…

实例详解PPT中表格美化有哪些方法

实例详解PPT中表格美化有哪些方法

方法,详解,表格,实例,有哪些,  PPT2013或PPT2016中表格的默认设置已经挺漂亮的了,但默认的设置毕竟要和PPT整体的风格一致才好,因此依然需要对PPT中表格进行进一步的美化设计。以下是小编为您带来的关于xxxx,希望对您有所帮助。实例详解PPT…

深入理解在JS中通过四种设置事件处

深入理解在JS中通过四种设置事件处

处理程序,设置,事件,方法,四种,所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式:第一种方…

在Word2007文档中如何设置段落间距

在Word2007文档中如何设置段落间距

设置,文档,间距,段落,如何设置,  段落间距是指段落与段落之间的距离,在Word2007中,用户可以通过多种渠道设置段落间距。以下是小编为您带来的关于在Word2007设置段落间距,希望对您有所帮助。在Word2007设置段落间距方法1:在Word2007文档窗口…

怎么在excel的菜单栏中添加自动求

怎么在excel的菜单栏中添加自动求

菜单,步骤,栏中,按钮,电脑软件,  Excel作为办公人员常用的软件之一,获得了世界范围的推广和使用。Excel软件依靠其强大的功能,成为一款快速、有效处理函数和公式的优秀软件。在Excel2003表格中想自动求和,不知道选项在哪?遇到这样的事情,也…

js 数字、字符串、布尔值的转换方

js 数字、字符串、布尔值的转换方

转换方法,数字,字符串,必看,布尔值,1、转换为字符串'' + 10 === '10'; // true将一个值加上空字符串可以轻松转换为字符串类型。2、字符串转换为数字+'010' === 10Number('010') === 10parseInt('010', 10) === 10 // 用来转换为…