How to add a div with a button click in angularjs
I am new to angularJs. What I was trying to say is that I have a div where I have a selectbox and a textbox in string format. there is a button "ADD". When I click on ADD I need to add the same divs at different times 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 hack this ...
+3
source to share
2 answers
You can use Angular and jquery directive selector. Basically replace a button with a directive that emits a button attached to the click event. On the click clone div html event, compile it using $ compile service in Angular and add it to 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>
+1
source to share
Add below code to your controller and change it a bit in html. Add ng-repeat to div tag for repeat and ng-click method on 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>
0
source to share