ng hide/show based on list values - angularjs

Question

I need to hide the "Current insurance cover" when coverAmt of all the covers in the list are zero or negative value. If any one coverAmt in the list is positive value then I need show the "Current insurance cover" only once.
I tried with something like this, but now no luck..!
<li ng-repeat="cover in accSummary.response.covers">
<div class="account-detail-row col-xs-12 col-sm-12 col-md-12 padding-left12 padding-right12 padding-top24 padding-bottom12">
<h4 class="font-16 fontwt-400" ng-hide="cover.coverAmt <= 0">Current insurance cover</h4>
</div>
</li>
can anybody please help me on this..! thanks.

Answer 1

You have to calculate this in your controller as below:
app.controller("cover", function($scope){
$scope.covers = [{coverAmt: 10},{coverAmt: 0},{coverAmt: -1}];
$scope.showHeading = function(){
var flag = false;
for(var i=0; i<$scope.covers.length; i++)
{
if($scope.covers[i].coverAmount > 0)
{
flag = true;
break;
}
}
return flag;
};
});
HTML will be
<h4 class="font-16 fontwt-400" ng-show="showHeading();">Current insurance cover</h4>

Answer 2

Try using ```ng-if`` to control the visibility of the Current Insurance Cover. But on the init of the ng-repeat, run a call to loop through the array to test your case.
Below is a sample of what this would look like:
HTML:
<li ng-repeat="cover in accSummary.response.covers" ng-init="checkCover()">
<div class="account-detail-row col-xs-12 col-sm-12 col-md-12 padding-left12 padding-right12 padding-top24 padding-bottom12">
<h4 class="font-16 fontwt-400" ng-if="visible">Current insurance cover</h4>
</div>
</li>
JS:
$scope.visible = false;
$scope.checkCover = function() {
angular.forEach(accSummary.response.covers, function(cover) {
if(cover.coverAmt > 0) { $scope.visible = true; return true; }
}
return false;
}

Answer 3

Firstly if you have the h4 Current insurance cover, within the ng-repeat. If you have multiple positive values, the header will appear multiple times
As for the calculation itself... Rather do that in your controller, then do something like:
<li ng-repeat="cover in accSummary.response.covers">
<div class="account-detail-row">
{{ cover.Something }}
</div>
</li>
<h4 ng-hide="isCurrent">Current insurance cover</h4>
Thus in the success event of the ajax request / promise you could do this:
var total = 0;
$http({ // or whatever request mechanism you're using
url: someURL,
method: "POST",
data: "{}",
headers: { 'Content-Type': 'application/json' }
})
.success(function (data) {
angular.forEach(data.accSummary, function(value, key) {
total += data.accSummary["coverAmt"]
})
})
.finally(function() {
$scope.isCurrent = total <= 0;
})
Or you could create a function and then pass the whole collection through from the view.
Your calculation function could look something like this:
$scope.isCurrent = function(covers) {
var total = 0;
for(var i = 0; i < covers.length; i++){
var cover = covers[i];
total += cover.coverAmt;
}
return total <= 0;
}
Then the usage would be usage:
<h4 ng-hide="isCurrent(accSummary.response.covers)">Current insurance cover</h4>