2

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

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

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

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

// view
{{ myVar | myFilter }}

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

这是这个问题的一个非常简单且无功能的 Plunker 的链接：http: //plnkr.co/edit/SjYLKKUZcTjzRFhbsjK0

4

3 回答 3

3

您可以将过滤器包装成“表格单元过滤器”或类似的，并打开过滤器参数 - 可以通过编程方式控制。

这是一个简单的例子：

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

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

于 2013-03-07T20:59:12.937 回答
1

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

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>

笨蛋。

于 2013-03-07T20:19:45.957 回答
1

一个更简单的替代方法是在显示值时调用一个函数。这样您就可以重用 $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>
于 2013-03-07T21:11:21.063 回答