如何在AngularJS中显示过滤后的ng-repeat数据的长度

任务是显示过滤后的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数据的长度变化，结果的长度也会变化。

输出:
最初的屏幕将是：
如何在AngularJS中显示过滤后的ng-repeat数据的长度？
搜索后，过滤后的ng-repeat数据长度变化：