AngularJS Filter

by zdam

HTML

<div ng:app="MyReverseModule">
 <div ng-controller="Ctrl">
   <input ng-model="greeting" type="greeting"><br>
   No filter: {{greeting}}<br>
   Reverse: {{greeting|reverse}}<br>
   Reverse + uppercase: {{greeting|reverse:true}}<br>
     
     <hr/>
     {{anotherProperty}}
     <button ng-click="useInJavascript()">Click</button>
     
 </div>
</div>

CSS

</style>
<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

angular.module('MyReverseModule', []).
  filter('reverse', function() {
    return function(input, uppercase) {
      var out = "";
      for (var i = 0; i < input.length; i++) {
        out = input.charAt(i) + out;
      }
      // conditional based on optional argument
      if (uppercase) {
        out = out.toUpperCase();
      }
      return out;
    }
  });

function Ctrl($scope, $filter) {
    $scope.greeting = 'hello';
    
    $scope.anotherProperty = 'world';
    
    $scope.useInJavascript = function() {
        var xx = $filter('reverse');
        
        $scope.anotherProperty = xx($scope.anotherProperty);
        
    };
}