對angularJs中ng-style動態(tài)改變樣式的實例講解
更新時間：2018年09月30日 14:20:47 作者：泠泠在路上
今天小編就為大家分享一篇對angularJs中ng-style動態(tài)改變樣式的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!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動態(tài)改變樣式的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了Angularjs 動態(tài)添加指令并綁定事件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
angular-ui-sortable實現(xiàn)可拖拽排序列表
這篇文章主要介紹了angular-ui-sortable實現(xiàn)可拖拽排序列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
基于Angular.js實現(xiàn)的觸摸滑動動畫實例代碼
這篇文章主要介紹了基于Angular.js實現(xiàn)的觸摸滑動動畫實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了AngularJS 控制器 controller的詳解的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了詳解webpack+es6+angular1.x項目構建， 小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
AngularJS實現(xiàn)動態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)添加Option的方法,涉及AngularJS事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
AngularJS使用ng-class動態(tài)增減class樣式的方法示例
這篇文章主要介紹了AngularJS使用ng-class動態(tài)增減class樣式的方法,結合具體實例形式分析了ng-class操作頁面class樣式的相關技巧,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Angular短信模板校驗代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
angular + express 實現(xiàn)websocket通信
最近需要實現(xiàn)一個功能,后端通過TCP協(xié)議連接雷達硬件的控制器,前端通過websocket連接后端,當控制器觸發(fā)消息的時候,把信息通知給所以前端,本文給的大家講解angular + express 實現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09
AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
今天小編就為大家分享一篇AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10