設置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過濾器（如日期或貨幣）編程從可變

回答

相關問題