如何在angularJs中单击按钮添加div

更新时间：2022-10-23 12:13:37

您可以使用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&gt ;< / 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> &LT; /选择&GT; &LT; / DIV&GT; < 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> &LT; /选择&GT; &LT; / DIV&GT; < 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; &LT; /选项&GT; < option value =Operator_4> &安培; GT; &LT; /选项&GT; < option value =Operator_5> & lt; =< / option> < option value =Operator_6> =&安培; GT; &LT; /选项&GT; &LT; /选择&GT; &LT; / DIV&GT; < 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> &LT; /选择&GT; &LT; / DIV&GT; < 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> &LT; /选择&GT; &LT; / DIV&GT; < div class =col-md-1> < div add-div-directive>< / div> &LT; / DIV&GT; < / 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"> &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>

上一篇 : ：使用代码选择TabControl中的选项卡下一篇 : 刷新WPF Datagrid没有绑定到可观察的集合？

如何在angularJs中单击按钮添加div

相关阅读

技术问答最新文章