CODEWITHSUNDEEP
angularjs
brucelee
brucelee

Reputation: 147

angular: how to make a button disabled based on a condition

Sorry for not being specific, but I'm having a blackout and am desperate. Have been struggling for 2 days now to find the logic to do the following: every item has a 'inCart' value. if it's 0, it's not in there, if it's below 7, it's in one of 6 'slots' depending on the value.

now i have buttons that assign each item to a value in inCart. but if one of the items has a value in it that is 4, then I obviously don't want all the items to show a button that will assign it to 4.

<tr ng-repeat="x in myItems">
<a ng-repeat="slot in [1,2,3,4,5,6]" ng-click="addToCart(x._id, slot)"
   class="btn btn-primary {{x.inCart != '0' ? 'disabled' : ''}}">
    {{slot}}
</a></tr>

Thinking about it logically I know my mistake: i only look if the current item is in the cart, and if it is then it disables the button. How do I look at all the items in the cart, and if one of them is for example 4, then all the buttons that assign an a value 4 to inCart are disabled, so that I won't have multiple items with the same location inCart.

based on the approach I can fix this I am pretty sure I can make everything work better then how it is now, it's just that I can't even figure this out so let alone the more detailed issues.

Upvotes: 0

Views: 3433

Answers (4)

Oren
Oren

Reputation: 5103

There's a directive designed specifically for this: ngDisabled

https://docs.angularjs.org/api/ng/directive/ngDisabled

Upvotes: 0

Fran Herrero
Fran Herrero

Reputation: 355

You can use the ngClass directive

You can evaluate a expression with ng-class and if it's true you can apply a certain class. If not, then the class won’t be applied. 

<button ng-class="{'disabled': expression}">

Upvotes: 1

MamaWalter
MamaWalter

Reputation: 2113

You could call a function to check if the slot is available.

Controller

// return the slots already used
var slotsUsed = $scope.myItems.map(function (i) {return i.inCart;}).filter( function(s) { return s > 0;});

$scope.slotAvailable = function(s) { 
    return slotsUsed.indexOf(s) == -1;
}

View

<tr ng-repeat="x in myItems">
    <td>  
        <a ng-repeat="slot in [1,2,3,4,5,6]" 
            class="btn btn-primary"
            ng-click="addToCart(x._id, slot)"
            ng-class="{'disabled': x.inCart != '0' || !slotAvailable(slot)}">
            {{slot}}
        </a>
    </td>
</tr>

Upvotes: 0

JLRishe
JLRishe

Reputation: 101652

If you use an actual button, you can make use of ngDisabled:

<input type="button" ng-repeat="slot in [1,2,3,4,5,6]" 
       ng-click="addToCart(x._id, slot)"
       class="btn btn-primary"
       ng-disabled="x.inCart !== '0'" value="{{slot}}" />

Upvotes: 0

Related Questions