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.photo
이undefined
처음부터 아이템에 사진 속성이 없기 때문에undefined != ''
하지만 어떻게 가치를 제공하는지 보여주는 코드를 입력해 주세요.item
도움이 될 거야
PS: 답변으로 투고하게 되어 죄송합니다만(코멘트라고 생각합니다만, 아직 평판이 좋지 않습니다).
'비어 있다'는 말은undefined
ng-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
'programing' 카테고리의 다른 글
Wordpress의 로그인/등록 페이지를 사용자 지정 로그인/등록 페이지로 리디렉션 (0) | 2023.04.02 |
---|---|
콘솔에서 리액트 요소의 소품 및 상태를 검사하려면 어떻게 해야 합니까? (0) | 2023.04.02 |
MongoDB 범위 페이지 설정 (0) | 2023.04.02 |
간격 데이터 유형에서 총 초수 추출 (0) | 2023.04.02 |
Excel interop 객체를 적절하게 정리하려면 어떻게 해야 하나요? (0) | 2023.04.02 |