如何在angularJs中单击按钮添加div

我是angularJs的新手。 我试图说我有一个div，我有一些行格式的选择框和文本框。 有一个按钮说“ADD”。 当我点击ADD时，我需要在前一个div下面添加相同的div元素。

这是我的div部分….

 IF 
  Table 1 Table 2 Table 3 Table 4 Table 5  
 
  Field 1 Field 2 Field 3 Field 4 Field 5  
 
   =   !=   <   >   <=   =>   
 
  Table 1 Table 2 Table 3 Table 4 Table 5  
 
  Field 1 Field 2 Field 3 Field 4 Field 5  
 
 Add 
  

帮我解决这个问题……

Answer 1

您可以使用Angular指令和jquery选择器。 基本上用一个指令替换按钮，该指令发出一个附加到点击事件的按钮。 在click事件上克隆div html，使用$ compile服务在angular中编译它并将其附加到正文。 看例子

 var app = angular.module('addDivApp', []); app.controller('addDivController', function($scope) { }); app.directive('addDivDirective', function() { return { restrict: 'A', scope: true, template: 'Add', controller: function($scope, $element, $compile) { $scope.clicked = 0; $scope.click = function() { $('body').append($compile($('.form-group').clone())($scope)); } } } }); 

        
 IF 
  Table 1 Table 2 Table 3 Table 4 Table 5  
 
  Field 1 Field 2 Field 3 Field 4 Field 5  
 
   =   !=   <   >   <=   =>   
 
  Table 1 Table 2 Table 3 Table 4 Table 5  
 
  Field 1 Field 2 Field 3 Field 4 Field 5  
 
 
 
 
   

Answer 2

在控制器中添加以下代码并在html中进行一些更改。 在div标签中添加ng-repeat以在按钮中重复和按住ng-click方法来调用function。

 $scope.divCount=[{}]; $scope.addDiv=function(){ $scope.divCount.push({}); }; $scope.removeDiv=function(){ $scope.divCount.splice($scope.divCount.length-1,1); } 

 
 IF 
  Table 1 Table 2 Table 3 Table 4 Table 5  
 
  Field 1 Field 2 Field 3 Field 4 Field 5  
 
   =   !=   <   >   <=   =>   
 
  Table 1 Table 2 Table 3 Table 4 Table 5  
 
  Field 1 Field 2 Field 3 Field 4 Field 5  
 
 Add 
 
 Remove