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. VC6.0 多线程输出乱序问题

    今天尝试编写多线程最简单的例子 #include "stdafx.h" #include "windows.h" #include <iostream&g ...

  2. C# Email 发送邮件，对方打开通知你

    直接上代码: //回执地址 var Receipt = "填写你需要回执的地址"; //实例化两个必要的 MailMessage mail = new MailMessage(); ...

  3. 「HNOI 2014」 江南乐

    \(Description\) \(n\)堆石子,每堆石子有\(s_i\)个,两个人轮流操作,每次可以将一对不少于\(F\)的石子尽量平均分成\(m\)堆,\(m\)每次自选,不能操作者输.共有\(T ...

  4. 30.Rotate Image（矩阵旋转）

    Level:   Medium 题目描述: You are given an n x n 2D matrix representing an image. Rotate the image by 90 ...

  5. “全栈2019”Java第十六章：下划线在数字中的意义

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. jqGrid-基础篇

    jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信.  一.jqGrid特性 基于jquery UI主题,开发者可以根据客户要 ...

  7. for循环枚举法,全排列+dfs,补充浮点数注意事项

    其实这个题目我一直没想好应该叫什么,就是在做蓝桥杯的时候会遇到很多的题,给你一等式,abcdef...分别是1-9(||12||15)不重复问你有几种方案? 我之前一直都是用的for循环在做,听说这叫 ...

  8. Archlinux 下系统如何设置让 Wine 调用 ibus输入法

    前言: 如果你是fcitx输入法用户,那么这篇文章大可不必看.fcitx是一个非常强大的框架,著名搜狗输入法就是基于fcitx输入法架构开发的.据我所知.您遇到这个问题可以通过卸载ibus输入法进行修 ...

  9. HTML5 简单Demo1

    ----------------------------页面效果图------------------------------ 截图1: 截图2: -------------------------- ...

  10. selenium自动加载Flash

    当我们在定位的时候,有时候会碰到Flash问题导致无法定位到元素 通过下面的代码就能解决问题 参考:https://blog.csdn.net/qq_37913997/article/details/ ...