2015-02-24 107 views
0

重複的div我在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> 
+0

你想重複哪個'div'? 'a'下面的父母「.uk-panel」? – matewka 2015-02-24 11:25:13

+0

確切的說,是的.... – 2015-02-24 11:26:41

回答

4

您可以添加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); 
}; 
+0

mmh,不幸的是在這種方式div不會出現在點擊一次。 – 2015-02-24 11:31:07

+1

對,我忘了'ng-repeat'接受對象和數組,而不是數字。看看我編輯的答案。 – matewka 2015-02-24 11:38:34

+0

它現在完美運行!謝謝!!! – 2015-02-24 11:42:32