angularjs之ng-class

半兽人 发表于: 2018-09-06   最后更新时间: 2023-08-22 15:25:49  
{{totalSubscript}} 订阅, 3,142 游览
<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="https://www.orchome.com/css/bootstrap/3.0.3/bootstrap.min.css"/>
    <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
    <title>Document</title>
</head>

<body ng-app="app">
<div ng-controller="CSSCtrl">
    <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
    <button class="btn btn-default" ng-click="showError()">错误</button>
    <button class="btn btn-default" ng-click="showWarning()">告警</button>
</div>
</body>

<style>
    .error {
        background-color: red;
    }

    .warning {
        background-color: yellow;
    }
</style>

<script>
    var app = angular.module("app", []);

    app.controller("CSSCtrl", function ($scope) {
        $scope.isError = false;
        $scope.isWarning = false;
        $scope.showError = function () {
            $scope.messageText = 'This is an error!';
            $scope.isError = true;
            $scope.isWarning = false;
        };
        $scope.showWarning = function () {
            $scope.messageText = 'Just a warning. please carry on.';
            $scope.isError = false;
            $scope.isWarning = true;
        }
    });
</script>
</html>

在线运行

更新于 2023-08-22
在线,13分钟前登录

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章