Search code examples
htmlcssangularjsmeanjs

How to solve the totalsum issue while using ng-hide in angularjs?


I am using MEAN stack in my application with AngularJS as my front-end. I am trying to hide a value and get the proper totalsum value too..My Plunker if inclusive is checked or true the exclusiveis false so the value should need to hide, so i have used ng-hide, the value also hidden. but the total sum value is displaying like hidden exclusive value too, so what i'm expecting if some of value is hidden the totalsum value must to be calculate rest of the values only..For Example:- if inclusive is true the exclusive value is hidden then the exclusive totalsum value should be 388 not like 499....... please look at the plunker and help me for the same thanks...

Controller:- For Exclusive Totalsum functionality:-

.filter('totalSumPriceQty', function () {
    return function (data, key1, key2) {        
        if (angular.isUndefined(data) && angular.isUndefined(key1)  && angular.isUndefined(key2)) 
            return 0;

        var sum = 0;
        angular.forEach(data,function(v,k){
            sum = sum + (parseInt(v[key1]) - parseInt(v[key2])/100);
        });
        return sum;
    }
})

    .filter('totalSumPriceQtytwo', function () {
       return function (data, key1, key2) {        
         if (angular.isUndefined(data) && angular.isUndefined(key1)  && angular.isUndefined(key2)) 
            return 0;
              var sum = 0;
                angular.forEach(data,function(v,k){
                  sum = sum + (parseInt(v[key1]) * parseInt(v[key2])/100);
             });
        return sum;
       }
    })

My HTML:-

<td ><p ng-hide="mani.service_tax==false">{{(mani.invoice_quantity - mani.invoice_value_fob/100)}}</p></td>

    <td ><p ng-hide="mani.exclusive==false">{{(mani.invoice_quantity * mani.invoice_value_fob/100)}}</p></td>

Totalsum Html:-

<td>{{resultValue | totalSumPriceQty:'invoice_quantity':'invoice_value_fob'}}</td>

  <td>{{resultValue | totalSumPriceQtytwo:'invoice_quantity':'invoice_value_fob'}}</td>

I have created Plunker for reference:- My Plunker

One more Example:-

Here one inclusive transaction is true another one is false...we have used ng-hide to hide the false value...the totalsum need to be calculate true value only like answer will be 34..... not like 127 pls help us...


Solution

  • for each of the filters, add the same logic to exclude the data that you use to hide

    filter('totalSumPriceQty', function () {
        return function (data, key1, key2) {        
            if (angular.isUndefined(data) && angular.isUndefined(key1)  && angular.isUndefined(key2)) 
                return 0;
    
            var sum = 0;
            angular.forEach(data,function(v,k){
              if(v.service_tax){
                sum = sum + (parseInt(v[key1]) - parseInt(v[key2])/100);
              }
            });
            return sum;
        }
    })
    
    filter('totalSumPriceQtytwo', function () {
        return function (data, key1, key2) {        
            if (angular.isUndefined(data) && angular.isUndefined(key1)  && angular.isUndefined(key2)) 
                return 0;
    
            var sum = 0;
            angular.forEach(data,function(v,k){
              if(v.exclusive){
                sum = sum + (parseInt(v[key1]) * parseInt(v[key2])/100);
              }
            });
            return sum;
        }
    })
    

    see forked plnkr