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 NIO学习-详细内容（二）

    五.Selector与SelectionKey Selector是SelectableChannel 对象的多路复用器,为什么使用Selector? 仅用单个线程来处理多个Channels的好处是,只 ...

  2. Oracle觸發器調用procedure寄信

    最近寫了一直Web Service給很多不同站的客戶端呼叫,并直接寄信通知程式中的異常. 直接在oracle中設置某張表的trigger(after insert),當有新的異常資料寫入時候,寄給相關 ...

  3. C#应用程序所有已经打开的窗体的集合

    获取所有打开的窗体的集合 Application.OpenForms 获取其中的某个窗体 Application.OpenForms["窗体名"]

  4. WebService 常用的设置

    1.修改WebService接收长度 <binding name="IAuthServiceSoap11Binding" maxBufferSize="214748 ...

  5. 转载：各种SQRT大比拼

    很有趣的文章: http://www.codeproject.com/Articles/69941/Best-Square-Root-Method-Algorithm-Function-Precisi

  6. java远程开关机

    最近,很多客户向我们反馈终端启动后异常的问题,因此,我自己做了一个远程开关的小工具,该工具的目的在于通过批量的方式来控制终端启动.其设计逻辑是通过服务端发送cmd指令 ,客户端接受并执行指令,把结果返 ...

  7. BJ2011集训/BZOJ2321 星器

    对于一行上的两个星星,假设它们的坐标为\(x1,x2\) \(x1->x1+1\) \(x2->x2-1\) \((x1+1)^2=x1^2+1+2*x1\) \((x2-1)^2=x2^ ...

  8. jquery源码解析：jQuery扩展方法extend的详解

    jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn. ...

  9. Mondrian Schema Workbench 概念及常用参数

    Schema Schema 定义了一个多维数据库.包含了一个逻辑模型,而这个逻辑模型的目的是为了书写 MDX 语言的查询语句.这个逻辑模型实际上提供了这几个概念: Cubes (立方体).维度( Di ...

  10. Intellij idea maven 引用无法搜索远程仓库的解决方案

    打开项目的POM文件,ALT+Insert键 出来添加引用的窗口 说明无法搜索到远程仓库,需要怎么设置呢? 在intellij idea 中配置好maven后 是这样的 如果加载失败,则需要自定义远程 ...