Recently working on a project revision,The first time I really used angular in the project, I usually write a small demo myself, and the feeling of doing exercises is still very different.It feels very fresh.There are several instructions that are often used,Because these are a little bit common,So let us introduce the ng-if, ng-show/ng-hide, ng-switch instructions together.Here's a detailed introduction:


1. The instructions here are the methods provided by the angular framework to set the display and hiding of the page content.Very easy to use,Especially do business logic.

2. The display is switched by the value of an expression.It's just that ng-switch can be other values,ng-if ng-show must be boolen.

3. I found a little trick in the process of using,We define an expression directly on the page through the expression setting ng-if or ng-show,At this time its value is actually undefined due to! == true So this part is also hidden by default.

So since it is a different instruction,Each has a specialization,Then let's take a look at what fruit capabilities they each have.. . (If you don't see the pirates, you can ignore it ~~)


Can be set to a variable

<div ng-show="show"></div>

Can also be used directly true/false

<div ng-show="true"></div>

For variables,We can set this value directly in js.

The characteristics of this instruction are,Even if we hide this part temporarily,It will also be rendered by the dom.


It is also used to set an expression:

Can be set to a variable

<div ng-if="more"></div>

Can also be used directly true/false

<div ng-if="true"></div>

For variables,We can set this value directly in js.

This is an instruction that can save us efficiency.If the expression value === false, then this part will not be rendered in the dom, or the original content will be deleted from the dom. So if there is part of the content,It doesn't need to be displayed at the beginning,We can use ng-if to hide it first.For example, a button that displays moreThe part that was not displayed at first,Can be set by ng-if, when we click more button,Then set ng-if=true. This reduces page rendering events,Improved efficiency.

There is another feature,ng-if or create your own scope, which inherits the parent's scope through the prototype. A typical example comes from reference 1.

There is also a small pit,Above $scope I can directly assign a value to a property such as:


But if you assign an object directly,Sorry, need to declare first,Add attributes to the object



The usage is a little more complicated than the first two.But it's also very intuitive,Similar to the switch function in native js:

Set ng-switch to an expression a in the outer parent element, then its child element is equivalent to several different options,The sub-element of the expression a corresponds to the ng-switch-with value, and that part is displayed.

<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>

This is also an instruction that can help us save efficiency.Like ng-if, if it is not equal to the value of the parent's ng-switch expression at first,Will not be rendered on the page,And we can also set the default display part through ng-switch-default.For example, the common tab tabs in the past are very easy to implement with this instruction.

There is a little question here,Because I am in the project,Make a single page application,All the different parts are in one page.Then I often need to display different parts according to different ajax return values,(Route cannot be used for special reasons), so I use the ng-switch instruction here. According to different return values,Show different sections.Although on-demand display is also possible,But I saw an article saying that using ng-switch like this is not very proper.Friends passing by,Anyone who knows can give me pointers! I thanked you in advance ~~

I will continue to share angular's experience in project development later,And the pits encountered!

to sum up

  • Previous AngularJS built-in service $http to the database addition, deletion and modification of the tutorial
  • Next Angular2 router routing navigate use and refresh the page in detail