angularjs之ng-class

<html>
<head>
    <base href="/"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!--css-->
    <link rel="stylesheet" href="webjars/bootstrap/3.3.6/dist/css/bootstrap.css"/>
    <!--js-->
    <script src="js/vendor/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>





发表于: 2月前   最后更新时间: 1月前   游览量:165
上一条: angularjs双向数据绑定
下一条: AngularJS之Controller

评论…


  • 评论…
    • in this conversation