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. jmeter-性能监控（InfluxDB+Grafana）

    测试结果实时监控:jmeter+influxdb+grafana InfluxDB:存储实时数据的DB Grafana:DB中存储的实时数据可以在浏览器查看 --------------------- ...

  2. ASP.NET mvc4 Controllder 同步还是异步

    从抽象类Controller 的定义可以看出他 同时实现了 IAsyncController, IController public abstract class Controller : Contr ...

  3. Spring事务管理—aop:pointcut expression 常见切入点表达式及事物说明

    例: <aop:config>  <aop:pointcut expression="execution(* com.xy.service.*.*(..))"   ...

  4. ArcGIS Runtime SDK for Android 授权(arcgis android 去除水印)

    ArcGIS Runtime SDK for Android 授权 ESRI中国北京 要下载和安装 ArcGIS Runtime SDK for Android,您需要注册开发者账户,进而便拥有了访问 ...

  5. vmware获取主机、数据中心等对象ManagedObjectReference

    在vmware的api中提供以下列表中的对象,称作ManagedObjectReference,包括虚拟机信息.主机.数据中心等等一些信息,我们可以通过vcenter的web api得到. 下面我们来 ...

  6. SqlServer：CTE函数处理递归（WITH语法）

    原文地址:http://www.cnblogs.com/xbf321/archive/2009/04/30/1446833.html 我们在做分类处理的时候,总会遇到递归的处理,比如说地区就是一个例子 ...

  7. C++构造和析构的顺序

    C++构造函数和析构函数的顺序 #include <iostream> using namespace std; class CA {public: CA() { cout << ...

  8. 比特币解锁脚本中的ScriptSignature都包含了什么东西

    比特币 解锁脚本signature script 包含了那些东西? 使用 UTXO 需要私钥签名,私钥到底都签了什么东西呢?一直比较好奇. 比特币的私钥签名总共有五中类型,具体见 btcd 代码,如下 ...

  9. 逃生（反向topo）

    逃生 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status De ...

  10. kvm虚拟化之kvm虚拟机控制台登陆

    vm虚拟机能否像xen虚拟机一样通过virsh console 一样采用字符界面进行linux虚拟机控制台呢,答案是肯定的,默认情况下该命令是不起作用的,需要修改相关文件才能实现. 1. 配置方法如下 ...