如何在angularJs中单击按钮添加div [英] How to add div with a button click in angularJs
问题描述
我是angularJs的新手。我试图说我有一个div,我有一些行格式的选择框和文本框。有一个按钮说ADD。当我点击ADD时,我需要在前一个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_1size =0style =width:100%;>
< option value =Table_1>表1< / option>
< option value =Table_2>表2< / option>
< option value =Table_3>表3< / option>
< option value =Table_4>表4< / option>
< option value =Table_5>表5< / option>
< / select>
< / div>
< div class =col-md-2>
< select name =FieldName_1multiple =size =4style =width:100%;>
< option value =Field_1>字段1< /选项>
< option value =Field_2>字段2< /选项>
< option value =Field_3>字段3< /选项>
< option value =Field_4> Field 4< / option>
< option value =Field_5>字段5< /选项>
< / select>
< / div>
< div class =col-md-1>
< select name =Operator_1size =0style =width:100%;>
< option value =Operator_1> =< /选项>
< option value =Operator_2> !=< / option>
< option value =Operator_3> < < /选项>
< option value =Operator_4> > < /选项>
< option value =Operator_5> < =< / option>
< option value =Operator_6> => < /选项>
< / select>
< / div>
< div class =col-md-2>
< select name =TableName_2size =0style =width:100%;>
< option value =Table_1>表1< / option>
< option value =Table_2>表2< / option>
< option value =Table_3>表3< / option>
< option value =Table_4>表4< / option>
< option value =Table_5>表5< / option>
< / select>
< / div>
< div class =col-md-2>
< select name =FieldName_2multiple =size =4style =width:100%;>
< option value =Field_1>字段1< /选项>
< option value =Field_2>字段2< /选项>
< option value =Field_3>字段3< /选项>
< option value =Field_4> Field 4< / option>
< option value =Field_5>字段5< /选项>
< / select>
< / div>
< div class =col-md-1>
< button id =addDivclass =btn btn-default>添加< / button>
< / div>
< / div>
帮我解决这个问题......
您可以使用Angular指令和jquery选择器。基本上用一个指令替换按钮,该指令发出一个附加到click事件的按钮。在click事件上克隆div html,使用$ compile服务在angular中编译它并将它附加到正文。参见示例
var app = angular.module('addDivApp',[]); app.controller('addDivController',function($ scope) ){}); app.directive('addDivDirective',function(){return {restrict:'A',scope:true,template:'< button id =addDivclass =btn btn-defaultng- 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 / javascriptsrc =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js>< / script> < script data-require =jquery @ *data-semver =2.1.4src =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_1size =0style =width:100%;> < option value =Table_1>表1< / option> < option value =Table_2>表2< / option> < option value =Table_3>表3< / option> < option value =Table_4>表4< / option> < option value =Table_5>表5< / option> < /选择> < / DIV> < div class =col-md-2> < select name =FieldName_1multiple =size =4style =width:100%;> < option value =Field_1>字段1< /选项> < 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> < /选择> < / DIV> < div class =col-md-1> < select name =Operator_1size =0style =width:100%;> < option value =Operator_1> =< /选项> < option value =Operator_2> !=< / option> < option value =Operator_3> &安培; LT; < /选项> < option value =Operator_4> &安培; GT; < /选项> < option value =Operator_5> & lt; =< / option> < option value =Operator_6> =&安培; GT; < /选项> < /选择> < / DIV> < div class =col-md-2> < select name =TableName_2size =0style =width:100%;> < option value =Table_1>表1< / option> < option value =Table_2>表2< / option> < option value =Table_3>表3< / option> < option value =Table_4>表4< / option> < option value =Table_5>表5< / option> < /选择> < / DIV> < div class =col-md-2> < select name =FieldName_2multiple =size =4style =width:100%;> < option value =Field_1>字段1< /选项> < 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> < /选择> < / DIV> < div class =col-md-1> < div add-div-directive>< / div> < / DIV> < / div>< / body>< / html>
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...
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>
这篇关于如何在angularJs中单击按钮添加div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!