각도 1.5 다른 개체 속성의 서식을 지정하는 사용자 지정 필터

다른 개체의 속성 값을 서식 지정하는 데 사용할 사용자 지정 Angular 1.5 필터를 만드는 방법을 생각 중입니다. html 파일에서 ng-repeat이 코드 렌더링 : 그들은 null 값을 가질 수
각도 1.5 다른 개체 속성의 서식을 지정하는 사용자 지정 필터

<div>{{::object.day || object.date || 'Something else'}}</div>

는 백엔드이 개체 속성을 보냅니다 때문에이 코드 줄은 말한다 - 객체는 null 값을하지 않은 재산 day이있는 경우 , 렌더링하거나 다른 속성 date이 null 값이 아닌 경우 렌더링합니다. 두 속성의 값이 null 인 경우 'Something else'을 렌더링합니다.

이 논리는 응용 프로그램의 여러 위치에서 사용되므로 custom Angular filter을 생성하는 것이 더 좋습니다. html에

angular.module('my-app', []). 
filter('my-filter', my-filter); 

function myFilter($filter){ 

return function(inputDay, inputDate) { 

    if(inputDay) { 
    var day = $filter('date')(new Date(inputDay), 'EEE'); 
    return day; 
    } 

    else if(inputDate) { 
    var date = $filter('date')(new Date(inputDate), 'M/d/yyyy'); 
    return date; 
    } 

    else { 
    return 'Something else'; 
    } 

    } 

}

그리고 :

그래서, 나는이 만들어 Something else 필터의 코드에서부터 HTML의 표현에 추가되지 않습니다 마지막 부분으로

<div>{{::object.day | myFilter:{object:day} || object.date | myFilter:{object:date}}}</div>

그 inputDay 및 inputDate이 모두 null 인 경우 반환해야합니다. 개체의 특성 day이 null없는 경우 -

문제는 필터가 적용하지만 조건의 첫 번째 부분에 대한 때문에 어쩌면 html 내 조건이 잘못된 것입니다. 따라서이 속성이있는 반복 된 항목에서 null이 아닌 경우 작동합니다.

다른 경우 - 날짜가 null이 아닌 경우 필터링 결과는 {}입니다. day 및 date의 값이 null 일 때 세 번째 경우와 마찬가지로 Something else 대신 {}이 표시됩니다.

일부 디버깅 후 객체의 속성이 undefined 인 것을 확인했습니다.

Object {myobject: undefined}

어디에 내 실수는? 모든 제안을 부탁드립니다.

출처

2017-03-16 Julsy

이 솔루션을 사용해 볼 수 있습니다.

이 템플릿입니다 :

<div id="body"> 
    <div ng-controller="FrameController as vm"> 
    <div>{{vm.firstObject.day && (vm.firstObject.day|myFilter:'day') || vm.firstObject.date && (vm.firstObject.date|myFilter:'date')}}</div> 
    <div>{{vm.secondObject.day && (vm.secondObject.day|myFilter:'day') || vm.secondObject.date && (vm.secondObject.date|myFilter:'date')}}</div> 
    </div> 
</div>

이 자바 스크립트의 일부입니다

angular.module('app', []).filter('myFilter', function ($filter){ 

return function(inputDate, formatType) { 
if(formatType === 'day') { 
    var day = $filter('date')(new Date(inputDate), 'EEE'); 
    return day; 
    } 
    else if(formatType === 'date') { 
    var date = $filter('date')(new Date(inputDate), 'M/d/yyyy'); 
    return date; 
    } 

    return 'Something else'; 
} 
}) 
.controller('FrameController', ['$injector', function($injector) { 
    var vm = this; 
    vm.message = 'Hello world'; 
    vm.firstObject = { 
    day: new Date() 
    }; 
    vm.secondObject = { 
    date: new Date() 
    }; 
}]); 

setTimeout(function() { 
    angular.bootstrap(document.getElementById('body'), ['app']); 
});

여기에 작업 jsfiddle입니다 : 도움을

이

http://jsfiddle.net/2mbs3o4s/

출처

2017-03-16 12:54:25

감사합니다! – Julsy

각도 1.5 다른 개체 속성의 서식을 지정하는 사용자 지정 필터

답변

관련 문제