How to inject uppercaseFilter in angular?

Question

I am trying to introduce an uppercase filter as a dependency insert for a controller, I tried to inject orderByFilter and it worked flawlessly. you can refer to my plunker project

Plunkerlink

 var app = angular.module("myApp", [])
  .controller('HomeController',function($scope,orderByFilter,uppercaseFilter)
{
  $scope.sortOrder = '-id';
  $scope.upperCase = 'fName';
   $scope.users = [
    { id: 1, fName: 'Hege', lName: "Pege" },
    { id: 2, fName: 'Kim', lName: "Pim" },
    { id: 3, fName: 'Jack', lName: "Jones" },
    { id: 4, fName: 'John', lName: "Doe" },
    { id: 5, fName: 'Peter', lName: "Pan" }
];
 $scope.users = orderByFilter($scope.users, $scope.sortOrder);
 $scope.users = uppercaseFilter($scope.users, $scope.upperCase);

});

Answer 1

You will have to process the array of objects manually, since the upperCase filter only works with strings. In your case, it might be something like this:

$scope.users = $scope.users.map(function(obj) {
    obj[$scope.upperCase] = obj[$scope.upperCase].toUpperCase();
    return obj;
});

Demo: http://plnkr.co/edit/QaCisLJAUI1eWbZNTtdz?p=preview

Answer 2

It can help you.

HTML sample code

<span>{{ users.fName | limitTo : 3 | uppercase }}</span>
<span ng-bind="users.fName | limitTo : 3 | uppercase "></span>

AngularJs Code Example

<script>
  angular.module("myApp").controller("myController"), function($filter){

    var result = $filter(‘limitTo’)(users.fName, 3);
    $filter(‘uppercase’)(result);
    ...
  }
</script>