Question

如何在使用特定计数动态创建元素后禁用按钮。我的意思是说我希望在点击按钮后动态创建5个div后禁用按钮....这可能是角度js

我正在给小提琴的网址enter code here HTML

<div ng-app="myApp" ng-controller="customersCtrl"> 
<button ng-click="createElement()" id="btnCreateElement"ng-disabled="isDisabled">ClickToAdd</button>

<div id="target">

</div>
<button ng-click="toogleElement()">ClickToAdd</button>
<div class="tryIt" ng-if="showDiv"></div>
<div class="tryIt" id="redDiv" ng-if="!showDiv"></div>

JS

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.showDiv=true;
$scope.isDisabled =false;

$scope.createElement =function(){
    var newDiv = angular.element('<div class="test"></div>');
    var newDivContainer = document.getElementById("target");
    angular.element(newDivContainer).append(newDiv);
    $scope.isDisabled =true;

}
$scope.toogleElement=function(){
    $scope.showDiv =!$scope.showDiv;
}


});

CSS

 .test{width:400px;height:30px;background:green;margin:10px 0;}
   .tryIt{width:200px;height:200px;background:#00B3E3;margin-left:50%; position:relative;}
   #target>div:nth-child(5){background:blue;}
   #redDiv{background:red;}
   #btnCreateElement{cursor:pointer;}
   #btnCreateElement:disabled{cursor:no-drop;}

https://jsfiddle.net/e61rdhtb/1/

Answer 1

您应该使用计数器变量来跟踪点击请求的数量并禁用连续的操作

示例代码

$scope.createElement = function() {
    if (clicks == 5) {
        $scope.isDisabled = true;
    } else {
        var newDiv = angular.element('<div class="test"></div>');
        var newDivContainer = document.getElementById("target");
        angular.element(newDivContainer).append(newDiv);
        clicks += 1;
        if (clicks == 5) {
            $scope.isDisabled = true;
        }
    }
}

Fiddle

Answer 2

您可以在控制器中维护一个计数变量。

$scope.count=0;
$scope.createElement =function(){
// your code
$scope.count++;
}

在UI上添加条件，以便在点击5次后按钮被禁用

<button ng-click="createElement()" id="btnCreateElement" ng-disabled="count==5">ClickToAdd</button>

动态创建元素后禁用按钮

2 个答案: