AngularJS添加样式

通过controller.js中的某个$scope变量的值来决定div标签（或者其他html标签）的样式表。

示例

使用ng-style指令在div标签上

<body ng-app="myApp" ng-controller="myCtrl">

<div ng-style="myStyle">菜鸟教程</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

    $scope.myStyle = {

        "color" : "white",

        "background-color" : "coral",

        "font-size" : "60px",

        "padding" : "50px"

    }

});

</script>

</body>

@完

参考：http://www.runoob.com/angularjs/ng-ng-style.html

AngularJS添加样式的更多相关文章

  1. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  2. 为html.EditorFor添加样式

    有网友问及,怎样为html.EditorFor添加样式. 解决方法,可以参考下面语法: 先new一个htmlAttributes. @model Book @using Insus.NET.Model ...

  3. JQuery为元素添加样式

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  4. JavaScript 应用开发 #5：为完成的任务添加样式

    判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...

  5. HTML添加样式三种办法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Javascrip动态添加样式，Dom操作，获取自定义属性

    var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...

  7. 原生js移除或添加样式

    样式效果如下,点击商品详情 添加样式active 代码 <!doctype html> <html lang="en"> <head> < ...

  8. v-html里面添加样式

    项目中,使用V-html渲染的页面,要添加样式,改如何做 解决方案1:在updated生命周期函数中,js动态配置样式,代码如下: updated() { $('.msgHtmlBox').find( ...

  9. React使用Styled-Componets来添加样式

    React使用Styled-Componets来添加样式 Styled-Comonents是用JS中ES6 语法的方式来管理CSS样式的一个组件,解决了在import CSS文件时样式重复 安装 项目 ...

随机推荐

  1. JAVA IO总结及socket简单实现

    为了方便理解与阐述,先引入两张图: a.Java IO中常用的类 在整个Java.io包中最重要的就是5个类和一个接口.5个类指的是File.OutputStream.InputStream.Writ ...

  2. VMware+Linux更改磁盘配额(使用gparted LiveCd) 实用!!!

    转载:http://blog.csdn.net/microad_liy/article/details/7667670 写这篇文章的原因: 最近要给服务器Centos上的ruby版本升级,由于是第一次 ...

  3. 如何执行oracle存储过程，就exec一下？

    不单单是exec一下,还是得分情况: 1.如果是命令窗口就用exec 存储过程名,举个栗子: EXEC procedure;--procedure是存储过程名 2.如果是PL/SQL窗口就用 begi ...

  4. 并行架构技术 EasyMR

    EasyMR简介 一个并行计算软件框架 基于此框架的软件可以运行在多台计算机组成的计算集群上,并且每个计算机的计算任务也是多线程方式并行进行的,对于处理复杂的业务和巨量数据时非常用于. 有着MapRe ...

  5. EasyFastCMS系列教学课程——1、三层框架的搭建

    在本系列教程中,我们以一个大型CMS系统的完整开发流程为例,和大家一起探讨net开发的经验和教训.在本程序中,我们采用了流行的三层/N层框架+仓储模式的架构模式.项目分层示意图:     各层的主要用 ...

  6. SAH Benchmarks Of Natural History Museum Scene

    method                                                                                               ...

  7. eclipse 中文或法文等语言注释错误解决办法 Some characters cannot be mapped using "GBK" character encoding

    这个问题会造成 无法修改包名.解决办法: Window->Preferences->Content Types->Text->Java Source File  Default ...

  8. OCP 12c最新考试原题及答案（071-6）

    6.(4-21) choose the best answer: View the Exhibit and examine the structure of the CUSTOMERS table. ...

  9. jQuery滚动到特定位置时出现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Elasticsearch 5.4.1 安装简易文档

    1. 系统安装JDK 1.8.0_131或以上版本的JDK 2. 创建软件安装目录 # mkdir -p /opt/software3. 创建elk用户,新版的ELK不在支持使用root账户运行程序, ...