ng-if 예제


따라서 표시된 블록은 모든 값이 true인 경우에만 표시됩니다. 예를 들어 AND b는 true여야 합니다: ng-if 지시문은 요소의 표시를 숨기는 ng-hide와 다르며, 여기서 ng-if 지시문은 DOM에서 요소를 완전히 제거합니다. DOM에서 콘텐츠를 추가/제거해야 하는 이유와 숨기거나 표시하는 것만으로 콘텐츠를 삭제해야 하는 이유는 무엇입니까? 왜 ng-if를 전혀 사용합니까? Angular가 앱의 변경 내용을 감시하는 방식에 따라 다이제스트 루프를 사용하여 앱의 변경 사항을 감시하여 뷰 또는 모델(양방향 데이터 바인딩)을 변경합니다. 시계는 성능 관점에서 비용이 많이 듭니다. DOM에서 요소를 제거하면 해당 요소의 모든 감시자를 제거합니다. 일반적으로 앱에 시계가 거의 없는 경우 더 빠르게 실행할 수 있습니다. angularJS의 ng-if 지시문은 식을 기반으로 HTML 요소의 일부를 제거하거나 다시 만드는 데 사용됩니다. ng-if는 요소의 표시를 숨기는 것이 아니라 DOM의 요소를 완전히 제거하기 때문에 ng-hide와 다릅니다. 내부의 식이 false이면 요소가 제거되고 true이면 요소가 DOM에 추가됩니다. 이제 문제는 브라우저에서 모두 동일한 작업을 수행하기 때문에 „ng-if“와 „ng-show/ng-hide“의 차이점입니다.

음, 차이점은 „ng-show/ng-hide“는 CSS의 디스플레이 속성을 조작하여 HTML 요소의 표시 및 숨기기만 하는 반면 „ng-if“는 HTML DOM 트리에서 HTML 부분을 완전히 제거하고 다시 만드는 것입니다. 닉이 루프, ng-반복 및 ng-if에 대한 간단한으로 수행 할 수있는 방법을 보여줍니다. 페이지에는 숫자 또는 `피즈`, `버즈` 또는 `FizzBuzz`를 표시하기 위한 범위가 포함되어 있습니다. 범위의 ng-if 식은 배열의 해당 요소가 3개 또는 5개 중일지 여부를 평가하고 DOM에서 요소를 추가하거나 제거합니다. 아래 예제는 모델에서 태그를 추가/제거하기 위한 두 가지 속성을 평가합니다. 사람이 까다롭다면, 그것은 그들의 더 상세한 커피 선호도를 보여줍니다. 예제에서 이 것을 사용할 수 있습니다. 각 사람은 이제 나이뿐만 아니라 이름을 가지고있다. 자바 스크립트 OR 및 AND 연산자 (| 및 & )는 ng-if 표현식 내에서 사용할 수 있습니다. 이렇게 하면 코드에서 할 수 있는 것처럼 ng-if 내에서 여러 값을 테스트할 수 있습니다. 이것은 ng 스위치와 같은 방식으로 많이 작동하지만 틀림없이 조금 더 간단한 구문으로 작동합니다.

바인딩된 속성의 하위 속성을 사용하고 있습니다. 예를 들어 사용자의 이름입니다. 사용자가 정의되지 않은 경우 이 속성에 액세스하면 오류가 발생합니다. 그러나 해당 속성을 사용하기 전에 null에 대한 사용자 속성을 확인하면 이를 방지할 수 있습니다. 구성 요소의 템플릿에서 ngIf 지시문을 사용하고 showAction의 값에 따라 작업 단추를 표시하거나 숨겨야 합니다. 이것은 템플릿의 예입니다: Ng-if는 DOM/페이지에서 요소를 완전히 제거합니다(대.