Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLNg-app= "Firstapp"><Head> <MetaCharSet= "Utf-8"> <Scriptsrc= "Angular-1.3.0.js"></Script></Head><Body><style>. It{Color:#ff7300;margin:10px;}. Curr{background:#006600;}. Fs18{font-size:30px;}. PD20{padding:20px;background:#26a3db;}</style><Pre>1. String array form. <DivNg-class= "{true: ' active ', false: ' inactive '}[isactive]"></div>equivalent to this evaluation: ({true: ' active ', false: ' inactive '}) [False] ({true: ' active ', false: ' inactive '}) [true] Var ct={t Rue: ' Active ', false: ' inactive '}; Ct[true] or ct[false] to get a value of ' active ' or ' inactive ' 2.scope variable bindings (deprecated) $scope. Test = "ClassName"; <Divclass= "{{test}}"></div>3. Like Key/value mode, handle class mix<DivNg-class= "{' selected ': isSelected, ' car ': IsCar}"></div></Pre><DivNg-controller= "Cartcontroller"> <Divclass= "It {{test}}">Scope variable Binding</Div> <Divclass= "It"Ng-click= "Selm ()"Ng-class= "{true: ' Curr ', false: '}[isactive]">As a string array, click</Div> <Divclass= "It"Ng-class= "{' Fs18 ': Isfs, ' PD20 ': ispd}"Ng-click= "selM3 ()">The Key/value object is handled in a way that handles class blending. The IT fs18 PD20 will be applied. Where it is the default</Div></Div><Script> varapp=Angular.module ('Firstapp',[]);//App Module nameApp.controller ('Cartcontroller',function($scope) {$scope. Test='Curr';//Direct Way. $scope. IsActive=false; $scope. Selm=function() {$scope. isActive=true; Console.log ('currently checked no', $scope. isActive)} //3rd Way$scope. Isfs=false; $scope. ISPD=false; $scope. SelM3=function() {$scope. Isfs=true; $scope. ISPD=true; } });</Script></Body></HTML>
AngularJS Ngclass How to use
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
