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

【问题标题】：How to add div with a button click in angularJs如何在angularJs中单击按钮添加div
【发布时间】：2015-07-16 05:15:39
【问题描述】：

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

这是我的 div 部分....

<div class="form-group row">
            <label class="col-md-1 control-label">IF</label>
            <div class="col-md-2">
                <select name="TableName_1" size="0" style="width: 100%;">
                    <option value="Table_1">Table 1</option>
                    <option value="Table_2">Table 2</option>
                    <option value="Table_3">Table 3</option>
                    <option value="Table_4">Table 4</option>
                    <option value="Table_5">Table 5</option>
                </select>
            </div>                
            <div class="col-md-2">
                <select name="FieldName_1" multiple="" size="4" style="width: 100%;">
                    <option value="Field_1">Field 1</option>
                    <option value="Field_2">Field 2</option>
                    <option value="Field_3">Field 3</option>
                    <option value="Field_4">Field 4</option>
                    <option value="Field_5">Field 5</option>
                </select>
            </div>
            <div class="col-md-1">
                <select name="Operator_1" size="0" style="width: 100%;">
                    <option value="Operator_1"> = </option>
                    <option value="Operator_2"> != </option>
                    <option value="Operator_3"> < </option>
                    <option value="Operator_4"> > </option>
                    <option value="Operator_5"> <= </option>
                    <option value="Operator_6"> => </option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="TableName_2" size="0" style="width: 100%;">
                    <option value="Table_1">Table 1</option>
                    <option value="Table_2">Table 2</option>
                    <option value="Table_3">Table 3</option>
                    <option value="Table_4">Table 4</option>
                    <option value="Table_5">Table 5</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="FieldName_2" multiple="" size="4" style="width: 100%;">
                    <option value="Field_1">Field 1</option>
                    <option value="Field_2">Field 2</option>
                    <option value="Field_3">Field 3</option>
                    <option value="Field_4">Field 4</option>
                    <option value="Field_5">Field 5</option>
                </select>
            </div>
            <div class="col-md-1">
                <button id="addDiv" class="btn btn-default">Add</button>
            </div>
        </div>

帮我破解这个...

【问题讨论】：

在您的控制器中，创建一个数组来保存这些值。每次单击添加按钮时，它都应将新项目添加到此数组中。然后你只需使用 ng-repeat 来遍历数组。
我实际上会为此构建一个指令...jsfiddle.net/ftfish/KyEr3
可以使用directive。在指令中绑定click事件，像使用jQuery一样操作DOM。
@Jony-Y 成功了
如果 dom 操作不是基于数据的，@Subho 指令是解决问题的最佳方法。正如您所说，您是初学者，本教程将帮助您以简单的方式理解指令weblogs.asp.net/dwahlin/…

标签： javascript jquery angularjs

【解决方案1】：

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

var app = angular.module('addDivApp', []);

app.controller('addDivController', function($scope) {

});

app.directive('addDivDirective', function() {
  return {
    restrict: 'A',
    scope: true,
    template: '<button id="addDiv" class="btn btn-default" ng-click="click()">Add</button>',
    controller: function($scope, $element, $compile) {
      $scope.clicked = 0;
      $scope.click = function() {
        $('body').append($compile($('.form-group').clone())($scope));
      }
    }
  }
});

<!DOCTYPE html>
<html ng-app="addDivApp">

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body ng-controller="addDivController">
  <div class="form-group row">
    <label class="col-md-1 control-label">IF</label>
    <div class="col-md-2">
      <select name="TableName_1" size="0" style="width: 100%;">
        <option value="Table_1">Table 1</option>
        <option value="Table_2">Table 2</option>
        <option value="Table_3">Table 3</option>
        <option value="Table_4">Table 4</option>
        <option value="Table_5">Table 5</option>
      </select>
    </div>
    <div class="col-md-2">
      <select name="FieldName_1" multiple="" size="4" style="width: 100%;">
        <option value="Field_1">Field 1</option>
        <option value="Field_2">Field 2</option>
        <option value="Field_3">Field 3</option>
        <option value="Field_4">Field 4</option>
        <option value="Field_5">Field 5</option>
      </select>
    </div>
    <div class="col-md-1">
      <select name="Operator_1" size="0" style="width: 100%;">
        <option value="Operator_1"> = </option>
        <option value="Operator_2"> != </option>
        <option value="Operator_3"> &lt; </option>
        <option value="Operator_4"> &gt; </option>
        <option value="Operator_5"> &lt;= </option>
        <option value="Operator_6"> =&gt; </option>
      </select>
    </div>
    <div class="col-md-2">
      <select name="TableName_2" size="0" style="width: 100%;">
        <option value="Table_1">Table 1</option>
        <option value="Table_2">Table 2</option>
        <option value="Table_3">Table 3</option>
        <option value="Table_4">Table 4</option>
        <option value="Table_5">Table 5</option>
      </select>
    </div>
    <div class="col-md-2">
      <select name="FieldName_2" multiple="" size="4" style="width: 100%;">
        <option value="Field_1">Field 1</option>
        <option value="Field_2">Field 2</option>
        <option value="Field_3">Field 3</option>
        <option value="Field_4">Field 4</option>
        <option value="Field_5">Field 5</option>
      </select>
    </div>
    <div class="col-md-1">
      <div add-div-directive></div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

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

$scope.divCount=[{}];
$scope.addDiv=function(){
    $scope.divCount.push({});
};

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

 
<div class="form-group row" ng-repeat="count in divCount">      
            <label class="col-md-1 control-label">IF</label>
            <div class="col-md-2">
                <select name="TableName_1" size="0" style="width: 100%;">
                    <option value="Table_1">Table 1</option>
                    <option value="Table_2">Table 2</option>
                    <option value="Table_3">Table 3</option>
                    <option value="Table_4">Table 4</option>
                    <option value="Table_5">Table 5</option>
                </select>
            </div>                
            <div class="col-md-2">
                <select name="FieldName_1" multiple="" size="4" style="width: 100%;">
                    <option value="Field_1">Field 1</option>
                    <option value="Field_2">Field 2</option>
                    <option value="Field_3">Field 3</option>
                    <option value="Field_4">Field 4</option>
                    <option value="Field_5">Field 5</option>
                </select>
            </div>
            <div class="col-md-1">
                <select name="Operator_1" size="0" style="width: 100%;">
                    <option value="Operator_1"> = </option>
                    <option value="Operator_2"> != </option>
                    <option value="Operator_3"> < </option>
                    <option value="Operator_4"> > </option>
                    <option value="Operator_5"> <= </option>
                    <option value="Operator_6"> => </option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="TableName_2" size="0" style="width: 100%;">
                    <option value="Table_1">Table 1</option>
                    <option value="Table_2">Table 2</option>
                    <option value="Table_3">Table 3</option>
                    <option value="Table_4">Table 4</option>
                    <option value="Table_5">Table 5</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="FieldName_2" multiple="" size="4" style="width: 100%;">
                    <option value="Field_1">Field 1</option>
                    <option value="Field_2">Field 2</option>
                    <option value="Field_3">Field 3</option>
                    <option value="Field_4">Field 4</option>
                    <option value="Field_5">Field 5</option>
                </select>
            </div>
            <div class="col-md-1">
                <button id="addDiv" class="btn btn-default" 
                        ng-click="addDiv()">Add</button>   
            </div>
            <div class="col-md-1">
                <button id="removeDiv" class="btn btn-default" 
                        ng-click="removeDiv()">Remove</button>   
            </div>
            
        </div>

【讨论】：