Question

我正在考虑如何制作一个自定义Angular 1.5过滤器，用于格式化不同对象属性的值。在html文件中使用ng-repeat呈现此代码：

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

后端发送这些对象属性，因为它们可以具有null值，因此这行代码表示 - 如果对象的属性day没有null值，则渲染它，或者如果其他属性date没有null值，则渲染它。如果这两个属性的值为null，则渲染'Something else'。

此逻辑将在应用程序的许多位置使用，因此最好创建一个custom Angular filter来保存它。

所以，我做了这个：

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';
   }

  }

}

在html：

中

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

由于最后一部分Something else未添加到html的表达式中，因为在过滤器的代码中，如果inputDay和inputDate都是null，则应该返回它。

问题是，html中的条件可能是错误的，因为过滤器仅适用于条件的第一部分 - 如果对象的属性day不是{ {1}}。所以在具有此属性的ng重复项中，当它不是null时，它可以工作。

但对于另一种情况 - 当日期不是null时，结果为过滤是null。对于第三种情况，当{}和day具有date值而非null时，它显示Something else。{
经过一些调试后，我发现对象的属性是{}。

undefined

我的错误在哪里？任何建议都表示赞赏。

Answer 1

您可以尝试此解决方案。

这是模板：

<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>

这是JavaScript部分：

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/

Angular 1.5自定义过滤器，用于格式化不同的对象属性

1 个答案: