javascript - A question about ng-bind in angular

Question

<p class="IFreshMode">
     <span ng-bind = "freezerDoorStatus"></span>
                   </p>

There is such a piece of code in the project. span is bound to freezerDoorStatus. Two of the values ​​are true and one is false. The class of p can be changed according to the boolean value, but true and false will always be displayed in the span. Is there any way to not display it or display it as a switch?

Answer 1

I still don’t quite understand your specific needs. See if it helps you
Use ng-show="isOpen" or ng-if="isOpen"
Then the controller can assign the value of $Scope.isOpen to true or false

Answer 2

ng-bind is equivalent to the replacement expression method {}, for example:
<span ng-bind="someValue" ></span>
is equivalent to
<span>{ { someValue }}</span>

If you need to control the style, you need to use ng-class, ng-style. If you need to control the display, use ng-if or ng-show, for example:
<span ng-style=" { backgroundColor : yourCondition ? 'red' : 'yellow' }" ></span>

Answer 3

The above describes the correct use of ng-bind, that is, <span ng-bind = "freezerDoorStatus"></span> is equivalent to <span>{{freezerDoorStatus}}</span>.
But when setting the style You can use ng-style or ng-class to control whether the style is displayed based on the value of the variable (true/false).
You can use<p ng-class="freezerDoorStatus ? IFreshMode : 'otherClass'"></p>or use ng-style, as follows<p ng-style="{'color':iconColor}"> ;</p>.
You can go to angular official website https://docs.angularjs.org/ap... for detailed introduction.