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

更新时间：2018年09月30日 14:20:47 作者：泠泠在路上

今天小编就为大家分享一篇对angularJs中ng-style动态改变样式的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<!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动态改变样式的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

对angularjs框架下controller间的传值方法详解
今天小编就为大家分享一篇对angularjs框架下controller间的传值方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
AngularJS控制器controller正确的通信的方法
AngularJS中的controller是个函数，用来向视图的作用域（$scope）添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为
2016-01-01
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下
2018-04-04
详解Angular动态组件
本文主要介绍了Angular动态组件，对此感兴趣的同学，可以亲自实验一下。
2021-05-05
如何在Angular.JS中接收并下载PDF
最近这两天公司正在做一个PDF协议下载的功能，目前的解决方案可以分为完全前端生成和后端生成两种方式。前端生成PDF有jsPDF 和pdfmake 两种方式，下面这篇文章就给大家分享下如何在Angular.JS中接收并下载PDF的方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-11-11
AngularJS中$watch和$timeout的使用示例
这篇文章给大家介绍了AngularJS中$watch和$timeout的使用例子，通过示例代码相信更能让大家理解，有需要的朋友们下面来一起看看吧。
2016-09-09
Angular父组件调用子组件的方法
组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构.这篇文章主要介绍了Angular组件——父组件调用子组件方法,需要的朋友可以参考下
2018-04-04
angularjs中的e2e测试实例
这篇文章主要介绍了angularjs中的e2e测试实例,本文使用Protractor来完成e2e测试,需要的朋友可以参考下
2014-12-12
angularjs客户端实现压缩图片文件并上传实例
这篇文章主要介绍了angularjs客户端实现压缩图片文件并上传实例,本文直接给出代码实例,需要的朋友可以参考下
2015-07-07
详解AngularJs HTTP响应拦截器实现登陆、权限校验
本篇文章主要介绍了AngularJs HTTP响应拦截器实现登陆、权限校验，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-04-04