• AngularJS使用ng-class、ng-style实现动态css样式

    一、style样式

    1、ng-style 使用

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myStyle">动态样式h1>
<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>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    2、双向绑定样式值（不推荐）

    这种方式在 IE 下是不兼容的。可以用 ng-style 或 ng-class来代替。

    style="background:{{(releaseFlag == 1)?'#28a745':'#ddd'}};color:{{(releaseFlag == 1)?'white':'black'}};"

style="background:{{(releaseFlag == 2)?'#28a745':'#ddd'}};color:{{(releaseFlag == 2)?'white':'black'}};"

    • 1
    • 2
    • 3

    二、Class样式

    1、条件判断

    根据flag的值来切换不同的class

    ng-class={red:flag==1,blue:flag!=1}

    • 1

    注意：以上写法在实验的过程中可用，但是我移到项目中就不可以使用了很奇怪，修改如下即可使用（在class名称上加单引号）

    ng-class="{'red':flag==1,'blue':flag!=1}"
//或者这样
ng-class={'red':flag==1,'blue':flag!=1}

    • 1
    • 2
    • 3

    报错信息：

    angular.min.js:81 Error: [$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=-&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=5&p3=%7Bbtn-primary-current%3Aname%3D%3D'123'%7D&p4=-primary-current%3Aname%3D%3D'123'%7D
    at https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:6:453
    at Ua.throwError (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:150:211)
    at Ua.consume (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:151:183)
    at Ua.object (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:158:342)
    at Ua.primary (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:149:358)
    at Ua.unary (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:156:73)
    at Ua.multiplicative (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:155:310)
    at Ua.additive (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:155:170)
    at Ua.relational (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:155:34)
    at Ua.equality (https://cdn.xxx.cn/js/angular/1.2.0/angular.min.js:154:397) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2、通过值选择

    <div ng-class="{true: 'btn-primary', false: 'btn-primary-current'}[flag]">123456div>
function bu($scope) { 
    $scope.flag= true;
}

    • 1
    • 2
    • 3
    • 4

    3、双向绑定 class 的值（不推荐）

    这种方式在 IE 下是可能也不兼容的。

    function bb($scope){
  $scope.ss="className";  
}
<div class="{{ss}}">div>

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    史上最全面试题版！看完吊打面试官！七夕来袭！是时候展现专属于程序员的浪漫了 10万字+
    语义图像合成在AI去衣技术中的应用
    【李航统计学习笔记】第二章：感知机
    GaussDB-物理、逻辑备份 使用方法和[GAUSS-53403]解决办法
    java智慧园区系统源码 智慧园区小程序源码
    SpringBoot与安全（Spring security）
    免费ChatGPT工具
    评比无代码低代码平台时，可以考虑以下几个方面
    海关外贸企业大数据风控平台
    王道数据结构（串4.1）
  • 原文地址：https://blog.csdn.net/qq_25775675/article/details/126175662