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. 解读DbContext中的三种【EagerLoad,LazyLoad,ExplicitLoading】加载模式

    一:立即加载,延迟加载,显式加载 1. 立即加载 Student Domain{ Teacher theacher} using (SchoolDBEntities db = new SchoolDB ...

  2. github注册流程

  3. 零成本实现WEB性能测试（二）JMeter基础知识

    特点: 支持多种服务类型进行测试,包括: Web-Http,HTTPS SOAP Database via JDBC LDAP JMS Mail-POP3 & IMAP 支持录制回放方式获取脚 ...

  4. ASP.NET MVC 控制器通过继承控制器来达到 过滤 并且多了一个IAuthenticationFilter

    暂时没有用到过这个IAuthenticationFilter接口,毕竟已经有三个具体实现类了,所以这个还不知道用在哪,以后看看 20190324 需要注意!!!控制器重写方法都是被protected修 ...

  5. OCP考试最新052题库分析整理-28

    28.Which two are true about external tables? A. They support the ORACLE_DATAPUMP access driver. B. T ...

  6. img标签中onerror用法

    <img src="/statics/bazi/images/150x100.jpg" alt="#" onerror="this.style. ...

  7. Metasploit Penetration Testing

    1.Metasploit整体框架: Shell中直接输入msfconsole启动PostgreSQL数据库服务 :service postgresql start 监听5432端口初始化Metaspl ...

  8. win10下安装mysql-5.7.25-winx64

    Step1 官方下载地址 https://dev.mysql.com/downloads/mysql/ 选择手动下载版本 mysql-5.7.25-winx64.zip 解压到自己指定的路径 上图中的 ...

  9. CF666E Forensic Examination SAM+线段树合并+前缀树倍增

    $ \color{#0066ff}{ 题目描述 }$ 给你一个串\(S\)以及一个字符串数组\(T[1..m]\),\(q\)次询问,每次问\(S\)的子串\(S[p_l..p_r]\)在\(T[l. ...

  10. 运算符重载入门demo

    #include "pch.h" #include <iostream> using namespace std; class A { public: A(int x, ...