반응형
정의되지 않은 표현식 값에 대해 AngularJS에서 자리 표시자를 표시하는 방법은 무엇입니까?
표현식이 {{ x }}
있고 x가 undefined
또는 null
인 경우 자리 표시자를 어떻게 표시 할 수 있습니까?
내 대답에 하나의 솔루션을 제공했지만 다른 방법이 있는지 알고 싶습니다. 약속의 자리 표시 자일 수도 있습니다.
{{ counter || '?'}}
. 순수한 자바 스크립트입니다. ||
기본값으로 사용할 수 있습니다. 각각의 빈 메시지가 다르기 때문에 일반화 된 지시문은 많은 경우에 적합하지 않습니다.
빈 클래스에 다른 클래스를 적용하려는 경우에도 내장되어 있습니다.
<div ng-class="{empty: !counter}" ng-bind="counter || ?"></div>
나는 이렇게 할 것이지만 더 나은 방법이있을 수 있습니다.
angular.module('app').filter('placeholdEmpty', function(){
return function(input){
if(!(input == undefined || input == null)){
return input;
} else {
return "placeholder";
}
}
});
그런 다음 {{ x | placeholdEmpty}}
다음과 같이 ng-show로 수행합니다.
<strong>{{username}}</strong>
<span class="empty" ng-show="!username">N/A</span>
물론, 다른 방식으로 처리 할 수있는 더 많은 요소를 뷰에 추가합니다. 내 자리 표시 자 / 빈 값이 어디에 있는지 명확하게 확인하는 것이 얼마나 쉬운 지 좋아하고 다르게 스타일을 지정할 수도 있습니다.
default
필터 구현 :
app.filter('default', function(){
return function(value, def) {
return (value === undefined || value === null? def : value);
};
});
다음과 같이 사용하십시오.
{{ x | default: '?' }}
필터 솔루션의 장점은 이상 {{ x || '?'}}
이 구별 할 수 있다는 것입니다 undefined
, null
또는 0
.
기본 필터를 구현하는 것은 작동하지만 숫자 만 사용하는 경우 앵귤러 고유의 숫자 필터를 사용할 수 있습니다.
입력이 null이거나 정의되지 않은 경우 반환됩니다. 입력이 무한대 (Infinity 또는 -Infinity)이면 각각 무한대 기호 '∞'또는 '-∞'가 반환됩니다. 입력이 숫자가 아니면 빈 문자열이 반환됩니다.
{{ (val | number ) || "Number not provided"}}
반응형
'developer tip' 카테고리의 다른 글
여러 메서드 인수의 @Cacheable 키 (0) | 2020.11.30 |
---|---|
jQuery 1.9를 사용하는 MVC 4 프로젝트의 jquery.validate.js 오류 (0) | 2020.11.30 |
HelloCordova에서 Ionic 앱의 이름을 바꾸는 방법 (0) | 2020.11.30 |
413 요청 엔티티가 너무 큼-파일 업로드 문제 (0) | 2020.11.30 |
실행중인 스크립트의 소스 경로를 어떻게 찾을 수 있습니까? (0) | 2020.11.30 |