Home > Developer > Web Develop
1, the expression of Angularjs can be written in the class dynamic change its value, the wording is as follows:
-, css1.html:
<!doctype html>
<meta charset= "Utf-8" >
<link rel= "stylesheet" href= "Css1.css" >
<body>
<div ng-controller= "Cssctrl" >
<p class= "Text-{{color}" > Test CSS style </p>//Note here the class= "Text-{{color}" this A class notation, text-, followed by the angular expression variable
<button class= "btn btn-default" ng-click= "Setgreen ()" > Green </button>
</div>
</body>
<script src= "Js/angular-1.3.0.js" ></script>
<script src= "Css1.js" ></script>
-, Css1.css:
. text-red {
Background-color: #ff0000;
}
. text-green {
Background-color: #00ff00;
}
-, Css1.js:
var mycssmodule = angular.module (' Mycssmodule ', []);
Mycssmodule.controller (' Cssctrl ', [' $scope ',
function ($scope) {
$scope. Color = "Red";
$scope. Setgreen = function () {//define a Setgreen () method, click Call this method to change the value of color, flat talk no odd is so simple
$scope. Color = "green";
}
}
]);
2, the above example of transformation, with Ng-class, the following wording:
-, ngclass.html:
<!doctype html>
<meta charset= "Utf-8" >
<link rel= "stylesheet" href= "Ngclass.css" >
<body>
<div ng-controller= ' Headercontroller ' >
<div ng-class= ' {error:iserror, warning:iswarning} ' >{{messageText}}</div>//Note ng-class= ' {error : IsError, warning:iswarning} ', the following expression means:
When IsError is true, the error style class is called, and when Iswarning is true, the warning style class is called
<button ng-click= ' ShowError () ' >simulate error</button>
<button ng-click= ' showwarning () ' >simulate warning</button>
</div>
</body>
<script src= "Js/angular-1.3.0.js" ></script>
<script src= "Ngclass.js" ></script>
-, Ngclass.css:
. Error {
background-color:red;
}
. Warning {
Background-color:yellow;
}
-, Ngclass.js:
var mycssmodule = angular.module (' Mycssmodule ', []);
Mycssmodule.controller (' Headercontroller ', [' $scope ',
function ($scope) {
$scope. IsError = false;
$scope. iswarning = false; Two tag variables are false by default
$scope. ShowError = function () The thing that is done in the controller is to assign a value to the variable, and call the method of assignment through the Ng-click in the HTML.
$scope. MessageText = ' This was an error! ';
$scope. IsError = true;
$scope. iswarning = false;
};
$scope. showwarning = function () {
$scope. MessageText = ' Just a warning. Carry on. ';
$scope. iswarning = true;
$scope. IsError = false;
};
}
])
[email protected] on the application of class and Ng-class
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
