programing

AngularJS - ng-if 체크 문자열 빈 값

telebox 2023. 4. 2. 10:18
반응형

AngularJS - ng-if 체크 문자열 빈 값

간단한 예시를 제시하겠습니다.

<a ng-if="item.photo == ''" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>
<a ng-if="item.photo != ''" href="#/details/{{item.id}}"><img ng-src="/{{item.photo}}" class="img-responsive"></a>

그렇구나, 그게 항상item.photo != ''값이 비어 있더라도 조건입니다. 왜일까요?

다음과 같은 수식어를 명시적으로 사용할 필요는 없습니다.item.photo == ''또는item.photo != ''. JavaScript와 마찬가지로 빈 문자열은 false로 평가됩니다.

당신의 견해는 훨씬 더 깨끗하고 읽기 쉬울 것입니다.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app init="item = {photo: ''}">
   <div ng-if="item.photo"> show if photo is not empty</div>
   <div ng-if="!item.photo"> show if photo is empty</div>
  
   <input type=text ng-model="item.photo" placeholder="photo" />
</div

Angular 버그를 제거하기 위해 업데이트됨

아마 당신의item.photoundefined처음부터 아이템에 사진 속성이 없기 때문에undefined != ''하지만 어떻게 가치를 제공하는지 보여주는 코드를 입력해 주세요.item도움이 될 거야

PS: 답변으로 투고하게 되어 죄송합니다만(코멘트라고 생각합니다만, 아직 평판이 좋지 않습니다).

'비어 있다'는 말은undefinedng-incriptions는 이렇게 해석됩니다.다음으로 다음을 사용할 수 있습니다.

<a ng-if="!item.photo" href="#/details/{{item.id}}"><img src="/img.jpg" class="img-responsive"></a>

이것이 일어날 수 있는 일입니다. 만약 이 가치가item.photo정의되어 있지 않다item.photo != ''항상 사실로 나타날 거야논리적으로 생각하면 말이 되겠지만item.photo빈 문자열이 아니기 때문에(따라서 이 조건은 실현됩니다.undefined.

이제 입력 값이 Angular 6에서 비어 있는지 확인하려는 사용자는 이 방법을 사용할 수 있습니다.

이것이 입력 필드라고 합시다.

<input type="number" id="myTextBox" name="myTextBox"
 [(ngModel)]="response.myTextBox"
            #myTextBox="ngModel">

필드가 비어 있는지 확인하려면 이 스크립트가 필요합니다.

<div *ngIf="!myTextBox.value" style="color:red;">
 Your field is empty
</div>

위의 답변과 이 답변의 미묘한 차이점에 유의하십시오.추가 속성을 추가했습니다..value내 입력 이름 뒤에myTextBox.
위의 답변이 Angular의 위 버전에서 효과가 있었는지 모르겠지만 Angular 6의 경우 이렇게 해야 합니다.

언급URL : https://stackoverflow.com/questions/27380000/angularjs-ng-if-check-string-empty-value

반응형