CODEWITHSUNDEEP
javascriptangularjs
joy08
joy08

Reputation: 9652

Using angular-js ng-disabled

I have this requirement where i need to disable a button based on some condition:

Controller:

<div  ng-controller= "myController" class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"   aria-hidden="true">×</button>
                    <h3 class="modal-title"> Add</h4>

I need to disable this button when I have added 5 entries in html page.Can someone help me out?

Upvotes: 0

Views: 114

Answers (4)

Nitheesh
Nitheesh

Reputation: 19986

Try using this

    <div ng-controller="myController" class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-disabled="isButtonDisabled()">×</button>
                <h3 class="modal-title"> Add</h3>
            </div>
        </div>
    </div>

And at controller 

$scope.isButtonDisabled = function() {
    return $scope.requiredArray.length >= 5;
}

This function will check whether the length of the required array is greater than 5 or not. If true button will be disabled.

Upvotes: 0

Vignesh
Vignesh

Reputation: 1212

if your value or the entires is array then you can do as follows 

    <div  ng-controller= "myController" class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"   aria-hidden="true">×</button>
                    <h3 class="modal-title"> Add</h4>
<button ng-disabled="entries.length >= 5">ADD</button>

Upvotes: 0

Chandru
Chandru

Reputation: 11184

When Entries Length is 5 

<button ng-disabled="entries.length == 5"></button>

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68645

If you have an array of that items, assume that the array is called items, you can pass a condition to the ng-disabled to set to true if the items.length >= 5.

<button type="button" class="close" ng-disabled="items.length >= 5" data-dismiss="modal" aria-hidden="true" >×</button>

Upvotes: 3

Related Questions