ng하위 수에 따른 숨김 또는 ngShow

ng하위 수에 따른 숨김 또는 ngShow

물어보는 게 정말 바보같은 짓이라는 건 알지만, 다음과 같은 방법이 있는지 궁금해요.

<div ng-show='this.children.length > 0'> // shown
   <div>

   </div>
</div>

@Josh David Miller의 답변에 더하여 다음 값은 각도에서 거짓으로 간주됩니다.

1) 빈 어레이

2) 빈 문자열 //스페이스도 true로 간주됩니다.

3) false가 있는 부울

4) 표시

5) 표시

6) 0

그래서 데이빗의 대답은 다음과 같이 쓸 수 있다.

<div ng-show="items.length">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

더 짧을 수도 있고

<div ng-show="items">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

AngularJS는 버전 1.3.0에서 획기적인 변화를 가져왔습니다!

불행히도 라즈카말스의 답은 더 이상 정확하지 않다.

이 버전부터는 다음 6개의 값만 거짓으로 간주됩니다.

1. false
2. null
3. undefined
4. NaN
5. 0
6. ""

값'f','0','false','no','n' ★★★★★★★★★★★★★★★★★」[]가 진부해졌다. (!)

그래서 사용하다

<div ng-show="items">
    <!-- ... --->
</div>

가 div로 표시되는 에는 더 할 수 .items의 요소가 포함되어 . 1개의 요소가 포함되어 있어도 입니다.items = []시됩니니다다

대신,

<div ng-show="items.length > 0">
    <!-- ... --->
</div>

Angular JS에서는 시야가 아니라 모델을 생각해야 합니다.

그렇기 때문에 무엇이 자신의 요소 안에 콘텐츠를 생성하는지 자문해 보아야 합니다.역동적이라면, 고객님의 모델에서 나온 것입니다.필요한 정보를 제공하기 위해 어떤 모델 자산에 액세스할 수 있습니까?

ngRepeat의 예를 다음에 나타냅니다.

<div ng-show="items.length > 0">
  <div ng-repeat="item in items">
    <!-- ... -->
  </div>
</div>

질문의 대부분을 보면, Angular를 「올바른」방법으로 사용하고 있지 않거나(프로젝트의 제약으로 인해!) 사용할 수 없는 것 같습니다.

고려해야 할 일반적인 사항들이 몇 가지 있습니다.

1. $compile을 사용하는 경우 코드 냄새입니다.95%의 경우 $compile을 사용할 필요가 없습니다.$compile을 사용하는 경우 해당 사실을 인식하고 있으며 필요한 작업을 수행할 수 있는 다른 방법을 찾을 수 없습니다.당신은 그것을 매우 조심스럽게 사용하고 있습니다.

2. DOM을 「정렬」하고 있는 경우는, 이것도 냄새일 가능성이 있습니다.이 경우에도 95%는 그렇게 할 필요가 없습니다.올바른 방법은 모델을 수정하고 Angular가 DOM을 처리하도록 하는 것입니다.

예를 들어 setTimeout 0을 사용하는 경우와 같은 방법으로 사용해야 합니다.사용할 때마다 해킹처럼 느껴질 겁니다.

HTML(서버는 아마?)을 완전히(또는 적어도 부분) 제어하지 않으면 Angular로 인해 문제가 발생할 수 있습니다.아마도 이것이 당신이 DOM 조작을 시도하고 있는 이유일 것입니다.

<div ng-show='this.children.length > 0'> // shown
   <div>

   </div>
</div>

이것은 우리가 누가 통제하고 있는지 확신할 수 없는 하나의 예이다.이 html을 생성하는 구성에 액세스할 수 있는 경우 ng-init으로 작성할 수도 있습니다.

<div ng-init="childElements = {{serverside variable}}" ng-show='childElements > 0'> // shown
   <div server-side-repeat>

   </div>
</div>

만약 당신이 이러한 것들을 꽤 많은 장소에서 하도록 강요 받는다면, 아마도 Angular는 당신에게 적합한 솔루션이 아닐까요?

AngularJS v1.3.3 =>ng-show="items"참, 거짓, 거짓, 오류, 오류를 평가하는데 효과가 없었습니다.경우에.items=[], ng-show는 여전히 true로 평가됩니다.대신 다음을 사용해야 했습니다.

<div ng-show="items.length">
    <!-- ... --->
</div>

그리고 일했다!!안내해 주셔서 감사합니다.

이것 또한 완벽하게 작동합니다.

<div ng-show="items.length">
<div ng-repeat="item in items">
<!-- bind to your Dom element -->
</div>
</div>

Christopher가 지적했듯이, 받아들여진 답은 더 이상 정확하지 않다.빈 배열은 여전히 truthy로 평가되기 때문입니다.

obj.children = []
<div ng-show='obj.children'> 
  As of Angular 1.3 this always shows if children exists as part of obj. 
</div>

현재의 솔루션

이 경우 어레이가 존재합니다.그러나 평가할 배열 배열의 0 요소를 각도로 지정했는데 해당 요소가 없는 경우 false로 평가됩니다.

<div ng-show='obj.children[0]'> 
  This will not show because there is no element in the array at 0
</div>

또한 [n]을(를) 배열의 임의의 번호 요소로 사용하여 카운트가 n보다 클 때만 표시할 수 있습니다.obj.children[2]을 사용하는 경우 배열에 요소가 3개 이상 있는 경우에만 표시됩니다.

언급URL : https://stackoverflow.com/questions/15913128/nghide-or-ngshow-based-on-number-of-children