设置AngularJS过滤器（如日期或货币）编程从可变

在角，可以很容易地格式化使用过滤器的变量，例如这些：设置AngularJS过滤器（如日期或货币）编程从可变

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

是否有任何方式以编程方式设置过滤器的类型所以它看起来像这样？

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

// view 
{{ myVar | myFilter }}

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

下面是一个非常简单的，和非功能性这个问题的Plunker链接：http://plnkr.co/edit/SjYLKKUZcTjzRFhbsjK0

来源

2013-03-07 Benmj

一个问题，三个不同的工作方案。 – Stewie 2013-03-07 21:59:22

@ stewie：堆栈溢出的奇迹！ – Benmj 2013-03-07 22:03:40

是的，当他们有用的时候获得不同的方法是很棒的！ – 2013-03-07 22:23:02

你可以将你的过滤器包装成一个“表格单元过滤器”或类似的，并打开一个过滤器参数 - 可以通过程序控制。

下面是一个简单的例子：

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-07 20:59:12

可以通过编程方式应用滤镜，但我不认为这是可能做到这一点的方式。如果你与定义控制器内部过滤值确定，那么你可能会做这样的：

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。

来源

2013-03-07 20:19:45 Stewie

一个简单得多的方法是在显示值时调用一个函数。这样你可以重用$ 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-07 21:11:21

设置AngularJS过滤器（如日期或货币）编程从可变

回答

相关问题