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


Posted in Javascript onApril 20, 2017

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

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

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

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

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

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

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

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

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

执行结果截图如下:

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

部分源码如下:

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

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

Javascript 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
JQuery this 和 $(this) 的区别
Aug 23 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
JS实现的简单下拉框联动功能示例
May 11 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 #Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 #Javascript
基于JavaScript实现活动倒计时效果
Apr 20 #Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 #Javascript
You might like
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP微信分享开发详解
2017/01/14 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
利用node.js如何创建子进程详解
2017/12/09 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
什么是lambda函数
2013/09/17 面试题
女大学生个人求职信
2013/12/09 职场文书
安全生产投入制度
2014/01/29 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
军训拉歌口号
2014/06/13 职场文书
公务员年终个人总结
2015/02/12 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
浅谈Python中的正则表达式
2021/06/28 Python