¿Cómo contar elementos de array en AngularJS?

Dada una array y la tarea es obtener la longitud de una variable de array en AngularJS. Para esto, usaremos el método .length() para obtener la longitud de una variable de array. 

Ejemplo 1: En este ejemplo, el cuadro de alerta muestra la longitud de la array.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
 
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function ($scope) {
            $scope.arr = ['GFG', 'Geek',
                'Geeks', 'GeeksForGeeks'];
            $scope.length = '';
            $scope.getLen = function () {
                $scope.length = $scope.arr.length;
                alert("Array Length = " + $scope.length);
            };
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
 
     
<p>
        How to count array items in AngularJS
    </p>
 
 
 
    <div ng-app="app">
        <div ng-controller="controller">
 
             
<p>Array = {{arr}}</p>
 
 
            <button ng-click="getLen()">
                Click To Get Length
            </button>
        </div>
    </div>
</body>
 
</html>

Producción:

  • Antes de hacer clic en el botón:

  • Después de hacer clic en el botón:

Ejemplo 2: En este ejemplo, la longitud se muestra dentro del elemento <p>.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
 
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function ($scope) {
            $scope.arr = ['GFG', 'Geek',
                    'Geeks', 'GeeksForGeeks'];
            $scope.length = '';
            $scope.getLen = function () {
                $scope.length = $scope.arr.length;
            };
        });
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
 
 
     
<p>
        How to count array items in AngularJS
    </p>
 
 
 
    <div ng-app="app">
        <div ng-controller="controller">
 
             
<p>Array = {{arr}}</p>
 
 
            <button ng-click="getLen()">
                Click To Get Length
            </button>
 
             
<p>Length is = {{length}}</p>
 
 
        </div>
    </div>
</body>
 
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *