developer tip

정의되지 않은 표현식 값에 대해 AngularJS에서 자리 표시자를 표시하는 방법은 무엇입니까?

optionbox 2020. 11. 30. 08:05
반응형

정의되지 않은 표현식 값에 대해 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"}}

참고 URL : https://stackoverflow.com/questions/15658535/how-to-display-placeholders-in-angularjs-for-undefined-expression-values

반응형