Programming

각도 JS에서 이중 및 단일 중괄호의 차이점은 무엇입니까?

procodes 2020. 5. 13. 21:01
반응형

각도 JS에서 이중 및 단일 중괄호의 차이점은 무엇입니까?


나는이 각도 세계에 익숙하지 않다. 나는 이중 중괄호 {{}}와 단일 중괄호 {}를 사용하는 것과 약간 혼동되거나 언젠가 지시문에 표현을 포함하는 데 중괄호가 사용되지 않는다

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

{{}}-이중 중괄호 :

{{}} Angular 표현식이며 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>

이미 표현 된 곳에서는 사용하지 마십시오!

예를 들어, 지시문 ngClick은 따옴표 사이에 쓰여진 모든 것을 표현식으로 처리합니다.

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

{}-단일 중괄호 :

{}우리가 알고 있듯이 JavaScript의 객체를 의미합니다. 여기서도 다른 점은 없습니다.

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

지도를 승인 ngClass하거나 ngStyle수락하는 일부 지시문이있는 경우 :

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

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

중괄호 없음 :

이미 언급했듯이 표현식 내부에서 괄호가 없습니다. 아주 간단합니다 :

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

 


{{}}그것에 대해 한 가지 더 Watcher로도 사용됩니다. 더 나은 성능을 위해 가능한 한 피하십시오

참고 URL : https://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js

반응형