Angularのカスタムフィルタ実装メモ

Angularのカスタムフィルタ実装メモメモとして。

app.js

var app = angular.module('app', [])
app.filter('fizzbuzz', function(){
  return function(value){
    if (!angular.isNumber(value)){
      return value;
    }
    if (value % 15 == 0){
      return 'Fizz Buzz';
    }
    if (value % 3 == 0){
      return 'Fizz';
    }
    if (value % 5 == 0){
      return 'Buzz';
    }
    return value;
  };
});

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>fizbuzz-filter</title>
  <script src="angular/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div ng-repeat="n in [1, 2, 3, 4, 5, 6, 7, 8, 9]">
    {{ n | fizzbuzz }}
  </div>
</body>
</html>

output

Custom filterスクリーンショット 2015 03 08 15 41 50

参考

AngularJSリファレンス

Pocket
LINEで送る

You may also like...