¿Cómo usar el filtro dentro de los controladores en AngularJS?

Los filtros se utilizan para dar formato al valor de una expresión y mostrarlo al usuario. Se puede utilizar en vistas previas de HTML, controladores o servicios y directivas. AngularJS tiene muchos filtros incorporados, pero podemos definir fácilmente nuestro propio filtro.

Filtros incorporados:

Si se inyecta una moneda de filtro mediante el uso de la dependencia currencyFilter . El argumento inyectado es una función que toma el valor a formatear como el primer argumento y filtra los parámetros comenzando con el segundo argumento. Las siguientes formas se utilizan para implementar el filtro.

Enfoque 1: uso de filtros en plantillas de vista
Sintaxis:

Al aplicar los filtros a las expresiones en las plantillas de vista:
```
{{ expression | filter }} 
```
Los filtros se pueden aplicar al resultado de otro filtro. Se llama “enstringmiento”:
```
{{ expression | filter1 | filter2 | ... }}
```

Los filtros pueden tener argumentos:

{{ expression | filter:argument1:argument2:... }}

Programa:

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
<body>
  
    <div ng-app="app1" ng-controller="currencyCtrl">
  
        <h1>Price: {{ price | currency }}</h1>
  
    </div>
  
    <script>
        var app = angular.module('app1', []);
        app.controller('currencyCtrl', function($scope) {
            $scope.price = 100;
        });
    </script>
  
    <p>
      The currency filter formats a number
      to a currency format.
    </p>
  
</body>
  
</html>

Producción:

Enfoque 2: el filtro se usa en directivas, servicios y controladores. Para lograr esto, inyecte una dependencia con el nombre de filtro en su directiva/controlador/servicio .

Programa:

<script>
var listedItems = [
    { itemID: 001, itemName: "Laptop", stockLeft: 1 },
    { itemID: 002, itemName: "Cell Phone", stockLeft: 3 },
    { itemID: 003, itemName: "Earphones", stockLeft: 0 },
    { itemID: 004, itemName: "Chargers", stockLeft: 5 },
    { itemID: 005, itemName: "Headphones", stockLeft: 0 },
    { itemID: 006, itemName: "USB Cables", stockLeft: 15}
];
  
 listedItems = listedItems.filter(function (item) {
    return (item.stockLeft > 0);
});
  
// This will display the no of items are in stock
prompt("", "There are " + listedItems.length
        + " items left in shop.");
</script>

Producción:

Enfoque 3: Es la modificación del segundo enfoque. Los filtros también se pueden agregar a AngularJS para formatear valores de datos. Hay un servicio de filtro de $ que se usa en nuestro controlador AngularJS. En AngularJS, también puede inyectar el servicio $filter dentro del controlador y puede usarlo con la siguiente sintaxis para el filtro.

Sintaxis:

$filter("filter")(array, expression, compare, propertyKey)
function myCtrl($scope, $filter)
{
    $scope.finalResult = $filter("filter")(
            $scope.objArray, $scope.searchObj);
};

AngularJS tiene algunos filtros incorporados que se pueden usar para reducir la ejecución de una array o una array en algunos puntos según alguna condición.
```
$scope.formatDate = $filter("date")($scope.date, "yyyy-MM-dd");
$scope.finalResult = $filter('uppercase')($scope.name);
```

Programa: Los filtros se agregan a las directivas, como ng-repeat , usando el símbolo de canalización o el carácter `|` , seguido de una etiqueta de filtro.

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body>
  
    <div ng-app="app1" ng-controller="piprCtrl">
  
        <p>
          Looping with obj object created for 
          nameList array:
        </p>
        <ul>
            <li ng-repeat="obj in nameList | orderBy:'city'">
                {{ obj.name + ', ' + obj.city }}
            </li>
        </ul>
  
    </div>
  
    <script>
        angular.module("app1", []).controller(
                "piprCtrl", function($scope) {
            $scope.nameList = [{
                name: "Hardik",
                city: "Chandigarh"
            }, {
                name: "Shekhar",
                city: "Dehradun"
            }, {
                name: "Sanyam",
                city: "Chandigarh"
            }, {
                name: "Poojan",
                city: "Dehradun"
            }, {
                name: "Aman",
                city: "Muzaffarnagar"
            }, {
                name: "Shashank",
                city: "Roorkee"
            }, {
                name: "Shazi",
                city: "Lucknow"
            }, {
                name: "Harshit",
                city: "Dehradun"
            }, {
                name: "Abhishek",
                city: "Gangoh"
            }];
        });
    </script>
  
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por HardikSinghal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta