Рубрики

Как отобразить длину отфильтрованных данных ng-repeat в AngularJS?

Задача состоит в том, чтобы отобразить длину отфильтрованных данных ng-repeat. Здесь мы собираемся использовать псевдоним для решения этой проблемы.

Подход: для отображения длины отфильтрованных данных ng-repeat мы используем выражение псевдонима. Мы создаем псевдоним для переменной, используемой для фильтрации данных ng-repeat и отображения длины псевдонима в каждый момент.

Синтаксис:

<element ng-repeat="expression | filter: search as result"> Content... </element>
<p> {{ result.length }} <p>

Пример:

<!DOCTYPE html>

<html>

      

<head>

    <title>

        Angular JS Filtered data length

    </title>

      

    <script src

"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

    </script>

</head>

      

<body

    <h1 style = "color:green; text-align:center;"

        GeeksForGeeks 

    </h1

      

    <div ng-app = "mainApp" ng-controller = "studentController">

        <input type = "text" ng-model = "searchName">

            <br/>

          

        <ul>

            <li ng-repeat

                "student in students | filter: searchName as result">

                {{ student.name + ', marks:' + student.marks }}

            </li>

        </ul>

        <p>length of filtered data:- {{ result.length }}</p>

    </div>

      

    <script>

        var mainApp = angular.module("mainApp", []);

          

        mainApp.controller('studentController', function($scope) {

            $scope.students = [

                {name:'Aman', marks:70},

                {name:'Aditya', marks:80},

                {name:'Pratyush', marks:92},

                {name:'Prakhar', marks:95},

                {name:'Pranjal', marks:75},

                {name:'Sunny', marks:69}

            ];

        });

    </script>

</body>

  

</html>

Объяснение:
Здесь мы отображаем информацию о студентах и есть окно поиска для поиска по имени студента. Теперь мы связываем ввод этого поля поиска с переменной AngularJS searchName. Переменная SearchName используется для фильтрации, мы создаем ее псевдоним, который является результатом здесь, а затем мы отображаем result.length. Так как длина фильтруемых данных ng-repeat изменяется, длина результата также изменяется.

Выход:
Начальный экран будет:

Затем после поиска отфильтровывается изменение длины данных ng-repeat:

Рекомендуемые посты:

Как отобразить длину отфильтрованных данных ng-repeat в AngularJS?

0.00 (0%) 0 votes