CODEWITHSUNDEEP
angularjs
Peter
Peter

Reputation: 933

Show button outside ng-repeat based on value inside

I have a table with some proposals.

<tr ng-repeat="tp in proposals">
    <td>
        <span class="label label-warning" data-ng-show="tp.IsApproved == 0">Awaiting</span>
        <span class="label label-danger" data-ng-show="tp.IsApproved == 1">Rejected</span>
        <span class="label label-success" data-ng-show="tp.IsApproved == 2">Approved</span>
    </td>
    <td> [...] </td>
</tr>

Then after this table I want to have a button which only shows if there are no items in proposals with IsApproved = 0. (So either they all have status 1/2 or none exist)

<button ng-if="hasOpenProposal == false" data-ng-click="doStuff()">Create New</button>

I guess I could do some weird stuff with ng-init to set hasOpenProposal to true at the point it encounters a 0 value but what would be a practical/good way to solve this?

Upvotes: 0

Views: 227

Answers (1)

JB Nizet
JB Nizet

Reputation: 691913

Use 

<button ng-if="!hasOpenProposal()" data-ng-click="doStuff()">Create New</button>

and implement the hasOpenProposal() function in the controller:

$scope.hasOpenProposal = function() {
    return $scope.proposals.some(function(p) {
        return p.IsApproved === 0;
    });
};

Or compute this flag once when the list of proposals is loaded and store it in a scope attribute.

Upvotes: 2

Related Questions