Home > Developer > Web Develop
This article focuses on using data binding to add a specific class name to an element to apply a specific style
From one of the most basic examples:
<!DOCTYPE HTML><HTMLNg-app><Head> <title>6.1CSS Classes and Styles</title> <MetaCharSet= "Utf-8"> <Scriptsrc=".. /angular.js "></Script> <Scriptsrc= "Script.js"></Script> <styletype= "Text/css">. Submit-false{background:#efefef;Color:#ccc}Button{Border:1px solid #ccc;Outline:0} </style></Head><Body> <DivNg-controller= "Buttondisable"> <Buttonclass= "submit-{{Disable}}"Ng-click= "deactive ()">Submit</Button> </Div></Body></HTML>
A Submit button, which will be disabled after clicking, appears dimmed:
Add the class name submit-{{disable}} to the button so that the change of the disable will cause a change in the button class name,
When the value of the disable variable is false, it will be stitched into the Submit-false class name, using the corresponding style
function buttondisable ($scope) { $scope. true ; function () { false }}Original state:
After one click:
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
