使用angular-js ng-disabled

时间:2017-09-28 04:38:55

标签: javascript angularjs

我有这个要求,我需要根据某些条件禁用按钮:

控制器:

<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>

当我在html页面中添加了5个条目时,我需要禁用此按钮。有人可以帮助我吗?

4 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

当条目长度为5

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

答案 2 :(得分:0)

如果您的值或数组是数组,那么您可以执行以下操作

    <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>

答案 3 :(得分:0)

尝试使用此

    <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>

在控制器

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

此函数将检查所需数组的长度是否大于5。如果将禁用true按钮。