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. simrank

    simrank 背景 度量相似度是许多应用的关键问题.传统方法与问题的领域相关,如文本匹配.计算交集.simrank则利用关联关系度量相似性,即"两个节点的相似性和各自邻域节点的相似度有关& ...

  2. 'System.ValueTuple, Version=0.0.0.0 required for Add-Migration on .NET 4.6.1 Class Library

    https://stackoverflow.com/questions/45978173/system-valuetuple-version-0-0-0-0-required-for-add-migr ...

  3. TSQL--NESTED LOOPS JOIN

    算法:遍历外表,将遍历出结果依次在内标中匹配查找 --如果内表无索引,则扫描内表 foreach(row r1 in outerTable) { foreach(row r2 in innerTabl ...

  4. c#获取pdf文件页数

    引用命名空间:using iTextSharp.text.pdf; string filePath = Server.MapPath("/upload/123.pdf"); //文 ...

  5. 洛谷P5265 【模板】多项式反三角函数

    题面 传送门 题解 我数学好像学得太差了 据说根据反三角函数求导公式 \[{d\over dx}\arcsin x={1\over \sqrt{1-x^2}}\] \[{d\over dx}\arct ...

  6. C语言小总结

    1.函数 有时程序中要多次实现某一功能,就需要多次重复编写实现此功能的代码,这使程序不精练.因此需要模块化程序设计的思想. 函数的返回值要匹配,若函数有返回值可以不接受,但是函数没有返回值不能接受. ...

  7. pandas筛选数据。

    https://jingyan.baidu.com/article/0eb457e508b6d303f0a90572.html 假如我们想要筛选D列数据中大于0的行:df[df['D']>0] ...

  8. TCP/IP协议之分层

     应用层和运输层只在端系统(End System)中实现, 底层协议在中间系统(Intermediate System)实现 ICMP和IGMP属于网络层的附属协议.虽然其内容是IP数据报的载荷(P ...

  9. Vue---基础笔记 (基础的构建 )

    vue 基础 准备工作 chrome浏览器插件安装 完成后出现标记 vue页面标记需要使用vue.js非vue.min.js 调试页面 结构模型MVVM =  m:model + v:view + v ...

  10. js实现checkbox全选,全部选和反选效果

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...