javascript - 每次点击重复 div Angular

标签 javascript html angularjs

我在 angularjs 中有一个计数器

$scope.count = 0;
    $scope.increment = function(){
        $scope.count = $scope.count + 1;
        console.log("count " + $scope.count);
    };
    $scope.decrement = function() {
        if($scope.count > 0) {
            $scope.count = $scope.count - 1;
        }
    };

如果计数值大于 1,我将显示一个 div。单击按钮即可增加计数器。每次我点击我都会增加计数器。实际上计数器运行得很好,但我会在每次点击时创建一个 div。现在我只能生成一个 div。这是html部分

<a class="uk-button" data-ng-click="increment()">
    <i class="uk-icon-plus" ></i>
    New div
</a>
<div class="uk-panel" data-ng-if="count >= 1">
    <hr>
    <div class="uk-panel uk-width-1-1 qt-add-row">
        <form class="uk-form uk-form-horizontal uk-float-left">
            <div class="uk-form-row"  data-ng-repeat="item in data.row">
                <label class="uk-form-label" for="form">{{item.name}}</label>
                <div class="uk-form-controls uk-width-1-1">
                    <input id="form" class="uk-width-1-1" type="text" placeholder="{{item.name}}" ng-model="field.value">
                        <span style="position: absolute" class="uk-button-group">

                            <a class="uk-button" href="#">
                                <i class="uk-icon-close"></i>
                            </a>
                        </span>
                </div>
            </div>
        </form>
    </div>
</div>

最佳答案

您可以将 ng-repeat 指令添加到 div 中。不幸的是 ng-repeat 只接受对象和数组,而不接受数字。因此,您还必须稍微修改您的递增/递减函数

<div class="uk-panel" data-ng-if="countArr.length > 0" data-ng-repeat="i in countArr">

$scope.countArr = [];
$scope.increment = function() {
    $scope.countArr.push('');
};
$scope.decrement = function() {
    $scope.countArr.splice(0, 1);
};

关于javascript - 每次点击重复 div Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28694437/

相关文章:

javascript - 如何在修改 DOM 后使自定义文本编辑器使用撤消和重做快捷方式?

html - 使用 float left 和 bootstrap 调整表格

javascript - JQuery 点击事件仅在第一次工作

javascript - 将对象传递给动态创建的指令

angularjs - $routeProvider 未触发 Controller

javascript - CSS/jQuery - 是否可以创建此形状(类似于倒圆)

javascript - 每个元素的高度如果高于则函数

javascript - Uncaught ReferenceError : require is not defined (javascript)

css - Bootstrap 分页并且在 768px 下没有响应

angularjs - 访问 ng-Submit 中的表单元素