2

Angularでは、次のようなフィルターを使用して変数を簡単にフォーマットできます。

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

このように見えるようにフィルターのタイプをプログラムで設定する方法はありますか？

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

// view
{{ myVar | myFilter }}

コンテキスト：サーバーからいくつかのメタ情報とともに表形式のデータを返しています。列を手動でコーディングせずに、日付、お金、数字などを表示したいのですが。

この問題の非常に単純で機能しないプランカーへのリンクは次のとおりです。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');
        }  
    };
});

必要に応じて、他のフィルターを読み込んで、そのフィルター内の入力に適用できることに注意してください。これにより、コードがクリーンで DRY になります。

于 2013-03-07T20:59:12.937 に答える
1

はるかに簡単な代替手段は、値を表示するときに関数を呼び出すことです。このようにして、$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>
于 2013-03-07T21:11:21.063 に答える
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 に答える