2013-06-21 7 views
6

AngularJSの最初のカスタムフィルタを作成しようとしています。何かが文字列か数字かを識別する能力が必要です。数字の場合は、組み込みフィルター| numberでフォーマットします。AngularJSテキスト/数値のカスタムフィルタ

I現在have a workaround using ng-if

HTML

<table> 
    <tr ng-repeat="(key, val) in data"> 
     <td>{{key}}</td> 
     <td ng-if="isNumber(val)">{{val | number}}</td> 
     <td ng-if="!isNumber(val)">{{val}}</td> 
    </tr> 
</table> 

コントローラー:

$scope.data = { 
    One:55689, 
    two:"consider all the options", 
    three:800243, 
    four:"all over", 
    five:"or just beginning" 
    }; 

    $scope.isNumber = function (value) { 
    return angular.isNumber(value); 
    }; 

私はそれはしかし自身のフィルタだとしてそれを割り当てるためのより良い解決策になるはずと考えました。これは私がこれまで持っていたものです(はい、私はそれが裸の骨であることを知っています...それは私の最初のものです)。

.filter('textOrNumber',function(){ 
    return function (input) { 
     if(typeof input === 'number'){ 
      console.log("I'm a number"); 
      //return as formatted number 
     } else { 
      console.log("Not a number"); 
      //do nothing, just return 
     }; 
     return input; 
    }; 
}) 

それは数であることを検証すると、私はちょうどそれが角度| numberフィルタを適用することができますか?または、自分でjavascriptでフィルタを手動で行う必要がありますか?

答えて

17

私は$filterサービスを注入して、プログラム的に、このように多数のフィルタを呼び出します。

angular.module('filters', []). 
filter('textOrNumber', ['$filter', function ($filter) { 
    return function (input, fractionSize) { 
     if (isNaN(input)) { 
      return input; 
     } else { 
      return $filter('number')(input, fractionSize); 
     }; 
    }; 
}]); 

あなたはこのようなあなたのtextOrNumberフィルタを使用することができるようになりますこの方法:ここでは

{{myText|textOrNumber:4}} 

JSFiddleに取り組んでいます。

+0

これは正確です。私はそれがこれほど簡単なことが分かっていました。私は '$ filter'を見ていません。私はそれができるものをよりよく理解するためにそれをしなければならないでしょう。 – EnigmaRM

関連する問題