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对象及属性
Feb 13 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
详解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
第六节--访问属性和方法
2006/11/16 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python遍历数组的方法小结
2015/04/30 Python
Python中的字符串替换操作示例
2016/06/27 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python如何爬取网页中的文字
2020/07/28 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
拾金不昧的表扬信
2014/01/16 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
社会学专业求职信
2014/07/17 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2016新年晚会开场白
2015/12/03 职场文书