Search code examples
angularjsangularjs-ng-repeatsearchfiltercollection

Angularjs: Search filter is not working on the other row of table which is function


I am writing a code. Here i made a table with ng-repeat. I fetched data from MySQL database with PHP. search filter is not working on calcTotal(names). when i search some keywords the results appeared right but the total fees paid remain same. filter is not working on that row.Anyone knows how to apply the same filter on different row or function. thanx in advance

<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>

Solution

  • It is because you are using your original array for calcTotal not the filtered array. You can also use filters in your controller to calculate filtered total.

    inject filterFilter to your controller

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

    and filter your array before calculations

    $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;
    };