How to add div with a button click in angularJs

Problem

I am new to angularJs. What i was trying to to let say I have a div where I have some selectbox and textbox in a row format. there is a button say "ADD". When I click on ADD i need to add the same div elements another time below the previous div.

This is my div part....

<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>

Help me to crack this...

Problem courtesy of: Subho

Solution

You can use an Angular directive and jquery selectors. Basically replace the button with a directive that emits a button attached to a click event. On the click event clone the div html, compile it using $compile service in angular and append it to the body. see example

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>

Solution courtesy of: Vincent Faller

Discussion

Add below code in your controller and do a little change in html. Add ng-repeat in div tag to repeat and ng-click method in button to call functions.

$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>

Discussion courtesy of: Panchanand Mahto

This recipe can be found in it's original form on Stack Over Flow.