在角JS双人和单人花括号之间的区别？ [英] Difference between double and single curly brace in angular JS?

问题描述

我是新来这个世界的角度，我对使用双大括号的有点糊涂了{{}}
单花括号{}或有时没有大括号用于包括在指令中的前pression像

1. 纳克级= {EX pression}


2. 正常的数据绑定一样{{} obj.key}


3. NG隐藏='MYDATA ===红

解决方案

{{}} - 双花括号：

{{}} 有角的前pressions，并提出非常方便，当你想要写的东西HTML：

 ＆LT; D​​IV＆GT;
    {{planet.name ==地球？ 是啊！我们是回家了！ ：嗯其中重吗？}}
＆LT; / DIV＆GT;＆LT;！ - 与一些指令，比如`ngSrc`  - ＆GT;
＆LT; IMG NG-SRC =htt​​p://www.example.com/gallery/{{hash}}/＆GT;＆LT;！ - 设置标题属性 - ＆GT;
＆LT; D​​IV NG-ATTR标题={{celebrity.name}}＆GT; ...＆LT;！ - 设置自定义属性，为自定义指令 - ＆GT;
＆LT; D​​IV定制指令定制ATTR ={{pizza.size}}＆GT;＆LT; / DIV＆GT;
 

在一个地方，已经是一个前pression不要使用这些！

例如，指令 ngClick 对待任何引号之间写在作为前pression：

 ＆LT;！ - 所以不要这么做！ - ＆GT;
＆LT;！ - ＆LT;按钮NG点击=激活（{{项目}}）＆GT; ...  - ＆GT;
 

{} - 单花括号：

{} ，因为我们知道代表的JavaScript对象。在这里，没有什么不同：

 ＆LT; D​​IV NG-的init =distanceWalked = {MON：2，周二：2.5，星期三：0.8，周四：3，周五：1.5，
坐：2，太阳：3}＆GT;
 

有了这样一些指令 ngClass 或 ngStyle 接受图：

 ＆LT;跨度NG风格={'色'：'红'}！＆GT; {{viruses.length}}发现病毒与LT; / SPAN＆GT;＆LT; D​​IV纳克级={'绿色'：蔬菜==生菜，
红色：蔬菜=='番茄'}＆GT; ..
 

没有花括号：

如前所述内前pressions时候才去bracketless。很简单：

 ＆LT; D​​IV NG-IF =zoo.enclosure.inmatesCount == 0＆GT;
    报警！所有猴子逃脱！
＆LT; / DIV＆GT;
 

I am new to this angular world, i am bit confused with the use of double curly braces {{}} and single curly braces{} or sometime no curly brace is used to include the expression like in the directives

1. ng-class={expression}
2. normal data binding like{{obj.key}}
3. ng-hide='mydata==="red"'

解决方案

{{}} - double curly braces:

{{}} are Angular expressions and come quite handy when you wish to write stuff to HTML:

<div>
    {{planet.name == "Earth" ? "Yeah! We 're home!" : "Eh! Where 're we?"}}
</div>

<!-- with some directives like `ngSrc` -->
<img ng-src="http://www.example.com/gallery/{{hash}}"/>

<!-- set the title attribute -->
<div ng-attr-title="{{celebrity.name}}">...

<!-- set a custom attribute for your custom directive -->
<div custom-directive custom-attr="{{pizza.size}}"></div>

Don't use these at a place that is already an expression!

For instance, the directive ngClick treats anything written in between the quotes as an expression:

<!-- so dont do this! -->
<!-- <button ng-click="activate({{item}})">... -->  

{} - single curly braces:

{} as we know stand for objects in JavaScript. Here, too, nothing different:

<div ng-init="distanceWalked = {mon:2, tue:2.5, wed:0.8, thu:3, fri:1.5, 
sat:2, sun:3}">

With some directives like ngClass or ngStyle that accept map:

<span ng-style="{'color' : 'red'}">{{viruses.length}} viruses found!</span>

<div ng-class="{'green' : vegetable == 'lettuce', 
'red' : vegetable == 'tomato'}">..

no curly braces:

As already mentioned just go bracketless when inside expressions. Quite simple:

<div ng-if="zoo.enclosure.inmatesCount == 0">
    Alarm! All the monkeys have escaped!
</div>

这篇关于在角JS双人和单人花括号之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！