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?

Answer 1

如果您具有该项目的数组，则假设该数组称为items ，如果items.length >= 5 ，则可以将条件传递给ng-disabled以设置为true。

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

Answer 2

条目长度为5时

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

Answer 3

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>

Answer 4

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.