Question

在Angular中，您可以使用过滤器轻松设置变量格式，例如：

{{ myDate | date }}
{{ myMoney | currency }}

有没有办法以编程方式设置过滤器的类型，使其看起来像这样？

// controller 
$scope.myFilter = 'date';

// view
{{ myVar | myFilter }}

上下文：我从我的服务器返回表格数据以及一些元信息。我想显示日期，金钱或数字等内容，而无需手动编写列。

以下链接指向此问题的一个非常简单且无功能的Plunker：http://plnkr.co/edit/SjYLKKUZcTjzRFhbsjK0

Answer 1

您可以将过滤器包装到“表格单元格过滤器”或类似过滤器中，然后启用过滤器参数 - 可以通过编程方式进行控制。

这是一个简单的例子：

http://plnkr.co/edit/1DGOC1gFZiFyGAQRCIhk?p=preview

在您的模板中：

  <ul>
    <li ng-repeat="value in values">{{value | myfilter:myFilterType }}</li>
  </ul>

过滤器：

app.filter('myfilter', function() {
    return function(input, type) {
    switch(type) {
        case 'uppercase':
          return input.toUpperCase();
        case 'lowercase':
          return input.toLowerCase();
        case 'date':
          return input.toString('dddd, MMMM ,yyyy');
        }  
    };
});

请注意，如果需要，您可以加载其他过滤器并将其应用于该过滤器内的输入，以便您的代码干净且干燥。

Answer 2

您可以通过编程方式应用过滤器，但我认为不可能这样做。如果您可以在控制器中定义过滤值，那么您可以这样做：

JS：

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope, $filter) {

  $scope.values = [new Date(-1), new Date()];

  $scope.myFilter = 'date';

  $scope.$watch('values', function(values){
    $scope.filteredValues = [];
    if(!angular.isArray(values)){
      return;
    }
    angular.forEach(values, function(value){
      $scope.filteredValues.push($filter($scope.myFilter)(value));
    });
  });

});

HTML：

<div ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="value in filteredValues">{{value}}</li>
  </ul>
</div>

Plunker

Answer 3

更简单的替代方法是在显示值时调用函数。这样您就可以重用$ filter服务并添加自己的逻辑。见plunker。

app.controller('MainCtrl', function($scope, $filter) {
  $scope.values = ['Test #1', 'Test #2'];

  $scope.myFilter = 'uppercase';
  $scope.myFilterFn = function(value) {
    console.log(value);
    var filter = $filter($scope.myFilter);
    console.log(filter);
    return filter(value);
  };
});

模板：

<body ng-controller="MainCtrl">
  <p>{{myFilter}}</p>
  <button ng-click="myFilter = 'uppercase';">Uppercase</button>
  <button ng-click="myFilter = 'lowercase';">Lowercase</button>
  <p>
    <ul>
      <li ng-repeat="value in values">{{myFilterFn(value)}}</li>
    </ul>
  </p>
</body>

设置AngularJS过滤器（例如日期或货币）以编程方式从Variable

3 个答案: