Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>AngularJS - css</title>
<style>
.error {
  background-color: red;
}
.warning {
  background-color: yellow;
}
</style>
</head>
<body ng-app="mojApp">
Primjer pokazuje upotrebu expression-a unutar ng-class.

<br><br>
<div ng-controller='MojCtrl'>
  <span ng-class='{error: isError, warning: isWarning}'>{{messageText}}</span>
  <br><br>
  <button ng-click='showError()'>Simulate Error</button>
  <button ng-click='showWarning()'>Simulate Warning</button>
</div>

$scope.isError = false;
        $scope.isWarning = false;
        $scope.messageText = 'DISPLAY AREA';
        
        $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.isWarning = true;
            $scope.isError = false;
        };
         
    });
</script>

</body>
</html>

Pregled stranice:

Pogledaj stranicu ../javascript/angularjs/primjeri/22css_ng-class.html.