How to add div with a button click in angularJs
Question
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...
2 answers
solution1
1 ACCPTED 2015-07-16 16:30:14
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"> < </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"> <div add-div-directive></div> </div> </div> </body> </html>
solution2
0 2015-07-16 18:13:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add a row on click of a “Add” button in angularJS
How to add `<input>` elements with button click AngularJS
AngularJS : Replicate div on click of button
How to add a new div on button click with React
How to add unique div on click button
how to add a button as html to a div and add click function
how to add input fields dynamically in angularjs on button click?
How to add HTML contents Dynamically on Button Click Event with AngularJS
How to add a html button with angularjs with a working ng-click function
Click button to copy text to another div with angularjs
Related Tags