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. layui中折叠面板的使用

    运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...

  2. java 添加到数据库的数据没有时分秒

    检查hibernate实体类的映射文件日期类型把date 改为 java.util.Date

  3. 7z文件格式及其源码的分析(三)

    上一篇在这里.  这是7z文件格式分析的第三篇, 相信有了前两篇的准备,你已经了解了7z源码的大致结构, 以及如何简单调试7z的源码了. 很多同学是不是迫不及待想要拔去7z的神秘外衣,看看究竟了. 好 ...

  4. Java中的多态方法

    public class Main { public void test(Object o) { System.out.println("Object"); } public vo ...

  5. WebCalendar.js

    var cal;   var isFocus=false; //是否为焦点   var pickMode ={       "second":1,       "minu ...

  6. [SIP01]SIP Header Fields里面各字段用途

    INVITE sip:bob@biloxi.com SIP/2.0 Via: SIP/2.0/UDP pc33.atlanta.com;branch=z9hG4bK776asdhds Max-Forw ...

  7. Python【filter、map、reduce】

    filter和map和reduce map(function,iterable...) -> list 映射,对列表中的每个值操作 返回操作后的数值组成列表 # 给列表值+1 l = [1,2, ...

  8. Cleare userprofile info

    $Site = Get-SPSite http://wtcsps99:27841 $ServiceContext = Get-SPServiceContext($Site) $ProfileManag ...

  9. Luckily general gradient for spherical harmonics is defined

    http://web4.cs.ucl.ac.uk/staff/j.kautz/publications/gradientSH_RS04.pdf

  10. 一行代码搞定Dubbo接口调用

    本文来自网易云社区 作者:吕彦峰 在工作中我们经常遇到关于接口测试的问题,无论是对于QA同学还是开发同学都会有远程接口调用的需求.针对这种问题我研发了一个工具包,专门用于远程Dubbo调用,下面就让我 ...