从变量中编程地设置AngularJS过滤器(如日期或货币)

Settings AngularJS Filter (such as date or currency) Programmatically from Variable

本文关键字：日期 货币 过滤器 AngularJS 变量 编程 设置      更新时间：2023-09-26

在Angular中，你可以很容易地使用过滤器来格式化变量，比如:

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

是否有任何方法可以通过编程设置过滤器的类型，使其看起来像这样?

// controller 
$scope.myFilter = 'date';
// view
{{ myVar | myFilter }}

上下文:我从服务器返回表格数据以及一些元信息。我希望显示日期、货币或数字等内容，而不必手工编写列。

这里有一个链接到这个问题的一个非常简单的，非功能的Plunker: http://plnkr.co/edit/SjYLKKUZcTjzRFhbsjK0

你可以把你的过滤器包装成一个'表格单元格过滤器'或类似的，并打开一个过滤器参数-这可以通过编程控制。

下面是一个简单的例子:

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

预览

在模板中:

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

请注意，如果需要，您可以加载其他过滤器并将它们应用于其中的输入，这样您的代码就会干净而DRY。

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

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>

砰砰作响。

一个更简单的替代方法是在显示值时调用一个函数。通过这种方式，您可以重用$filter服务并添加自己的逻辑。看到砰砰作响。

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>

相关文章：