AngularJS basic styles-AngularJS-js tutorial

This article mainly introduces some basic AngularJS styles. AngularJS is a highly popular JavaScript framework. For more information, see Show and hide

Everything in Angular is based on model changes, which are then reflected on the interface through identifiers.
Ng-show and ng-hide can do the same thing. Display and hide are based on the expressions you pass to them, that is, when the expression is true, ng-show is displayed, and vice versa. If the expression is true, ng-hide is hidden and displayed on the contrary. These identifiers work by setting the element style display: block display and display: none hide.
CSS class and Style

Data Binding can be performed through {} parsing to dynamically set classes and styles.
Ng-class and ng-style

In large projects, the above method makes it difficult to manage, so that you have to read templates and JavaScript at the same time to create css correctly.
Angular provides ng-class and ng-style identifiers. Each of them requires an expression. The result of expression execution may be one of the following:

• A string that represents the names of classes separated by spaces.
• An array of class names
• Ing between a class name and a Boolean Value

Selected row

In the template, we set the ng-class value to {selected: $ index = selectedRow}. When the model calls selectedRow, it will match the $ index of ng-repeat, the selected style is displayed. Similarly, we set ng-click to notify the Controller user which line has been clicked.
Src and href suggestions

Ng-src and ng-href are recommended.

segmentfault

All source code

  
   Angular demo