对angularJs中ng-style动态改变样式的实例讲解


Posted in Javascript onSeptember 30, 2018

如下所示:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
 颜色: <input type="text" ng-model="color">
 大小: <input type="number" ng-model="size"><br/>
 <!--通过输入color和size的值,改变style的值-->
 <span ng-style="{color:color,fontSize:size+'px'}">泠泠在路上</span>
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
 }]);
</script>
</body>
</html>

效果图:

对angularJs中ng-style动态改变样式的实例讲解

以上这篇对angularJs中ng-style动态改变样式的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
JS模板实现方法
Apr 03 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 #Javascript
angular将html代码输出为内容的实例
Sep 30 #Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 #Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 #Javascript
vue  自定义组件实现通讯录功能
Sep 30 #Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 #Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
AngularJS入门之动画
2016/07/27 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
讲解Python中的标识运算符
2015/05/14 Python
python实用代码片段收集贴
2015/06/03 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
进修护士自我鉴定
2013/10/14 职场文书
先进个人获奖感言
2014/01/24 职场文书
2014年电教工作总结
2014/12/19 职场文书
个人创业事迹材料
2014/12/30 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
HDFS免重启挂载新磁盘
2022/04/06 Servers