对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 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
jquery 问答知识整理
2010/02/11 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
vue实现分页加载效果
2019/12/24 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
python 批量将中文名转换为拼音
2021/02/07 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
公司司机岗位职责
2014/02/07 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
文化活动实施方案
2014/03/28 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
计划生育宣传标语
2014/06/21 职场文书
防火标语大全
2014/10/06 职场文书
给校长的建议书范文
2015/09/14 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python