Angularjs：搜索过滤器不适用于功能表的另一行答案

【问题标题】：Angularjs: Search filter is not working on the other row of table which is functionAngularjs：搜索过滤器不适用于功能表的另一行
【发布时间】：2024-01-30 06:15:01
【问题描述】：

我正在编写代码。在这里，我用 ng-repeat 做了一张桌子。我用 PHP 从 MySQL 数据库中获取数据。搜索过滤器不适用于 calcTotal(names)。当我搜索一些关键字时，结果显示正确，但支付的总费用保持不变。过滤器不适用于该行。任何人都知道如何在不同的行或函数上应用相同的过滤器。提前谢谢

<script>
               var app= angular.module("myapp",[]);
                app.controller("mycontroller",function ($scope, $http)
                    //get data from database
                    {
                    $http.get("getData.php").then(function (response) {
                        $scope.names = response.data.records;});
                        //subtraction between dates
                        $scope.CurrentDate=new Date();
                        $scope.calDate = function(date1, date2){
                           var dateOut1 = new Date(date1);
                           var dateOut2 = new Date(date2);
                           var timeDiff = Math.abs(dateOut2.getTime() - 
                      dateOut1.getTime());

                           var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
                           return diffDays;
                        };
                        $scope.getToday = function(){
                            return new Date();
                        }
                        //total fees paid
                              $scope.calcTotal = function(names){
                                    var sum = 0;
                                    for(var i = 0 ; i<names.length ; i++){
                                    sum = sum + names[i].fpaid;
                                    }
                                return sum;
                              };


                    });    

</script>
<body ng-app ="myapp" ng-controller="mycontroller">
         <p>
             Search Here: <input type="text" placeholder="Search" ng-
           model="searchText">
        </p>
    <table border=1>
                <tr>

                    <th >Name of student </th>
                    <th >Course Name  </th>
                    <th >Course fees </th>
                    <th ></th>
                    <th>Balance Fees</th>   
                    <th>Start Date of Course </th>
                    <th >End date of course</th>
                    <th> No of days </th>
                    <th>No of Days remaining </th>

                </tr>
                    <tr   ng-repeat="x in names  | filter: searchText | orderBy:sortColumn">

                        <td>{{x.Bank}}</td>
                        <td>{{x.cname}}</td>
                        <td >{{x.cfees}}</td>
                        <td>{{x.fpaid }}</td>
                        <td ng-model="bfess">{{x.cfees-x.fpaid}}</td>
                        <td>{{x.sdate | date:'dd-MM-yyyy'}}</td>
                        <td>{{x.edate | date:'dd-MM-yyyy'}}</td>
                        <td>{{calDate(x.edate,x.sdate)}}</td>
                        <td>{{calDate(x.edate,getToday()| date:'dd-MM-yyyy')}}</td>                     
                </tr>
                <tr>
                    <td>Total fess paid by students: {{ calcTotal(names) }}</td>
                </tr>

            </table>

【问题讨论】：

标签： angularjs angularjs-ng-repeat searchfiltercollection

【解决方案1】：

这是因为您将原始数组用于 calcTotal 而不是过滤后的数组。您还可以在控制器中使用过滤器来计算过滤后的总数。

将 filterFilter 注入你的控制器

controller('mycontroller', ['$scope', '$http','filterFilter', function FilterController($scope, $http,filterFilter)

在计算之前过滤你的数组

$scope.calcTotal = function(names){
    var filteredArray = filterFilter(names, $scope.searchText);
    var sum = 0;

    for(var i = 0 ; i<filteredArray.length ; i++){
        sum = sum + filteredArray[i].fpaid;
    }

    return sum;
};

【讨论】：

TypeError: Cannot read property 'length' of undefined at ChildScope.FilterController.$scope.calcTotal 出现此错误
我认为您的过滤数组是未定义的，但如果没有看到代码就很难猜到，如果您提供一个小提琴/plunker，我相信我们可以解决问题
我解决了这个错误......这段代码真的很有效......非常感谢:)
很高兴能帮上忙。