Preface
Recently I am doing a project revision. The first time I really use Angular in the project, I feel very different from writing small demos myself and doing exercises. It feels very fresh. There are several instructions that are often used. Since these are a bit common, let’s introduce these instructions ng-if, ng-show/ng-hide, ng-switch. Let’s take a look at the detailed introduction below:
Commonality
1. The instructions here are all methods provided by the Angular framework to set the display and hide the content of the page, which is very convenient to use, especially for business logic.
2. Switching display is achieved through the value of an expression, but ng-switch can be other values, and ng-if ng-show must be boolen.
3. I found a small trick during the use process. We directly define an expression on the page by setting ng-if or ng-show through expressions. At this time, its value is actually undefined, because ! == true so this part is also hidden by default.
So since they are different instructions, they have their own specialties, so let’s take a look at what fruit abilities they have. . . (If you don’t watch pirates, you can ignore them~~)
ng-show/ng-hide
When using native js or jquery, we can generally define a class, and use adding and deleting this class to realize the display and hidden switching of elements. In fact, from the online reference materials, Angular is also implemented in this way. According to whether the expression is correct or not, dynamically add or delete the predefined class of ng-hide Angualr. The call method is as follows:
Can set a variable
<div ng-show='show'></div>
You can also use true / false directly
<div ng-show='true'></div>
For variables, we can set this value directly in js.
The characteristic of this directive is that even if we temporarily hide this part of the content, it will be rendered by the dom.
ng-if
The usage method is also to set an expression:
Can set a variable
<div ng-if='more'></div>
You can also use true / false directly
<div ng-if='true'></div>
For variables, we can set this value directly in js.
This is a directive that can help us save efficiency. If the expression value === false , this part will not be rendered in the dom, or the original content will be deleted from the dom. So if there is a part of the content that does not need to be displayed at the beginning, we can use ng-if to hide it first. For example, a drop-down button that displays more. The part that is not displayed at the beginning can be set by ng-if. When we click more buttons, then set ng-if = true. This reduces page rendering events and improves efficiency.
There is also a feature, ng-if or create your own scope, which inherits the parent scope through the prototype. A typical example comes from Reference Resource 1.
There is also a small pit. I can directly assign a property value to $scope, such as:
$ = 'abut'
But if you assign an object directly, I'm sorry, you need to declare it first and then add attributes to the object
$ = {};
$ = 'about';
ng-swith
The usage method is a little more complicated than the previous two, but it is also very intuitive, similar to the switch function in native js:
Set ng-switch to an expression A on the outer parent element, then its child element is equivalent to several different options. The ng-switch-with value of which child element corresponds to expression A will display that part.
<div ng-switch='showpart'> <div ng-switch-default></div> <div ng-switch-with='home'></div> <div ng-switch-with='blog'></div> <div ng-switch-with='about'></div> <div ng-switch-with='contact'></div> </div>
This is also a command that can help us save efficiency. Like ng-if, if the value of the parent ng-switch expression is not equal to the parent, it will not be rendered on the page, and we can also set the default display part through ng-switch-default. For example, the Tab tab that was common in the past was very easy to implement with this instruction.
There is a little doubt here, because I am doing a single page application in the project, and all the different parts are in one page. Then I often need to display different parts according to different ajax return values (the route cannot be used for special reasons), so I use the ng-switch directive here to display different parts according to different return values. Although it can also be displayed on demand, I saw an article saying that using ng-switch in this way is not very appropriate. Friends passing by, if you know, you can give me some advice! I've thanked here in advance~~
Later, I will continue to share Angular's experience in project development and the pitfalls encountered!
Summarize
The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s learning or use. If you have any questions, you can leave a message to communicate. Thank you for your support.