角度JS中双花括号和单花括号的区别? [英] Difference between double and single curly brace in angular JS?
问题描述
我是这个有角度的世界的新手,我对双花括号 {{}} 的使用有点困惑和单个大括号{}或有时不使用大括号来包含像指令中的表达式
ng-class={表达式}
普通数据绑定如{{obj.key}}
ng-hide='mydata==="red"'
{{}} - 双花括号:
{{}}
是 Angular 表达式,当您希望将内容写入 HTML 时非常方便:
{{行星名称==地球"?"是啊!我们到家了!": "诶!我们在哪儿?"}}<!-- 带有一些指令,如 `ngSrc` --><img ng-src="http://www.example.com/gallery/{{hash}}"/><!-- 设置标题属性--><div ng-attr-title="{{celebrity.name}}">...<!-- 为您的自定义指令设置自定义属性--><div custom-directive custom-attr="{{pizza.size}}"></div>
不要在已经是表达式的地方使用这些!
例如,指令 ngClick
将引号之间的任何内容视为表达式:
<!-- 所以不要这样做!--><!-- <button ng-click="activate({{item}})">... -->
{} - 单花括号:
{}
正如我们所知,代表 JavaScript 中的对象.这里也没什么不同:
使用一些指令,如 ngClass
或 ngStyle
接受地图:
<span ng-style="{'color' : 'red'}">{{viruses.length}} 发现病毒!</span><div ng-class="{'green' : 蔬菜 == '生菜','红色' : 蔬菜 == '番茄'}">..
没有花括号:
正如已经提到的,在表达式内部时不要使用括号.很简单:
警报!所有的猴子都逃走了!
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
ng-class={expression}
normal data binding like{{obj.key}}
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 braceless when inside expressions. Quite simple:
<div ng-if="zoo.enclosure.inmatesCount == 0">
Alarm! All the monkeys have escaped!
</div>
这篇关于角度JS中双花括号和单花括号的区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文