3

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

Improve this question
5
  • 1
    in your controller, create an array to hold the values. each time you click the add button, it should add the new item to this array. Then you just use ng-repeat to iterate through the array. Commented Jul 16, 2015 at 5:18
  • 3
    I would actually build a directive for that...jsfiddle.net/ftfish/KyEr3 Commented Jul 16, 2015 at 5:55
  • may use directive. In directive, bind click event, and operate DOM like using jQuery. Commented Jul 16, 2015 at 5:56
  • @Jony-Y has nailed it Commented Jul 16, 2015 at 6:01
  • @Subho directives are the best way to solve the problem if the dom maniputlation is not based on data. As you said you are a beginner this tutorial will help you understand the directives in a simple way weblogs.asp.net/dwahlin/… Commented Jul 16, 2015 at 6:03

2 Answers 2

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.