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>






发表于: 16天前   最后更新时间: 16天前   游览量:52
上一条: angularjs双向数据绑定
下一条: HTML5布局新元素header、nav、section、article、aside、footer

评论…


  • 评论…
    • in this conversation