Using angular-js ng-disabled

Question

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?

Suren Srapyan · Accepted Answer · 2017-09-28 04:41:02Z

3

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>

answered Sep 28, 2017 at 4:41

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joy08 Over a year ago

Can i call a function within ng-disabled?

Suren Srapyan Over a year ago

Yes you can. It gets an expression inside

Chandru · Accepted Answer · 2017-09-28 04:42:09Z

0

When Entries Length is 5

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

answered Sep 28, 2017 at 4:42

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

3 Comments

jitender Over a year ago

what is the difference between your answer and the answer below?

Chandru Over a year ago

Where is your answer @jitender

jitender Over a year ago

Bro I don't answer just see answer given by @suren below 5 min ago than your answer

Vignesh · Accepted Answer · 2017-09-28 04:43:20Z

0

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>

answered Sep 28, 2017 at 4:43

Vignesh

1,2221 gold badge10 silver badges17 bronze badges

3 Comments

jitender Over a year ago

what is the difference between your answer and the answer below?

Vignesh Over a year ago

I dont see your answer anywhere @jitender

jitender Over a year ago

am never say answer by me i said answer below check it out stackoverflow.com/a/46461100/5621827

Nitheesh · Accepted Answer · 2017-09-28 05:36:40Z

0

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.

answered Sep 28, 2017 at 5:36

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Using angular-js ng-disabled

4 Answers 4

2 Comments

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related