单击以删除AngularJS中动态创建的元素

Question

目前无论用户在文本框中输入并单击按钮，都会动态显示锚标记内部（全部以新行显示）。

文本框和按钮（HTML文件） -

<input type="text" name="inputText"><br>

<tr>
        <input type="button" value="ADD" ng-click="$ctrl.addtext()">
</tr>

<div id="outputDiv"></div>

JS函数 -

ctrl.addtext = function () {
    var div = document.getElementById('outputDiv');
    div.innerHTML += "<a href='' style='margin-left:10px'>"+newtext+"</a><br>";
}

有没有办法在动态创建的锚标记的末尾添加一个关闭/删除按钮（如X），只需点击一下即可删除那些特定的行？

Answer 1

编辑3

使用不同的组件语法：

function scanExceptionComponentCtrl ($scope, $compile) {
  
  var ctrl = this;
  ctrl.addtext = function (e) {
    var newtext = document.listForm.inputText.value
    var outputDiv = $('#outputDiv');
    var newRow = $compile("<a href='' style='margin-left:10px'>"+newtext+" - <span ng-click='$ctrl.removeRow($event)'>X</span></a><br>")($scope);
    newRow.appendTo(outputDiv)
  };

  ctrl.removeRow = function(e) {
    e.preventDefault();
    e.target.parentNode.remove();
  };
  
};

// angular.module('consoleApp', [])
 angular.module('consoleApp',[])
   .component('scanException', {
  templateUrl: 'templateId',
  controller: scanExceptionComponentCtrl
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="consoleApp">
  <scan-exception></scan-exception>  
  
  
  <script type="text/ng-template" id="templateId">
	<form name="listForm">
		<table border="0" cellspacing="0">
			<tr>
				<input type="radio" style="margin-left:10px;" name="checkRadio" value="append" checked><span class="add-file-text" style="font-weight:bold;">Add File to Exception List</span><br>
				<input type="text" style="width:250px;height:30px;margin-left:10px;margin-top:10px;" name="inputText"><br>
			</tr>
			<tr>
				<input type="button" style="margin-left:10px;margin-top:10px;" value="ADD" ng-click="$ctrl.addtext($event)">
			</tr>
			<tr>
				<td>
					<div id="outputDiv"></div>
				</td>
			</tr>
		</table>
	</form>
</script>
  
</div>

编辑2 - 更新以使用jQuery语法并将$ scope传递给$ compile

添加ng-click并使用$ compile（确保包含在控制器中）

ctrl.addtext = function () {
  var outputDiv = $('#outputDiv');
  var newRow = $compile("<a href='' style='margin-left:10px'>" + 'newtext ' + " <span ng-click='removeRow($event)'>X</span></a><br>")($scope);
  newRow.appendTo(outputDiv)
};

创建功能

我不确定你想删除哪个元素。

ctrl.removeRow = function(e) {
  e.preventDefault();
  e.target.parentNode.remove();
};

代码段

编写组件/控制器的方式可能有所不同。

angular.module('myApp', [])
  .controller('myController', function ($scope, $compile) {

    $scope.addText = function () {
     var outputDiv = $('#outputDiv');
     var newRow = $compile("<a href='' style='margin-left:10px'>" + 'newtext ' + " <span ng-click='removeRow($event)'>X</span></a><br>")($scope);
     newRow.appendTo(outputDiv)
   };
   
   $scope.removeRow = function(e) {
     e.preventDefault();
     e.target.parentNode.remove();
   };


  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
 
  
  <button ng-click="addText($event)">add text</button>
  
  
  <div id="outputDiv"></div>
</div>

Answer 2

您可以使用角度中的$event属性或类似html-5数据属性的属性来检索被点击元素的信息。大致你的代码看起来像这样：

HTML：

<input type="button" value="ADD" ng-click="$ctrl.addtext($event)">

和JS

ctrl.addtext = function (event) {
    var clickedElem = document.getElementById(event.target.id);
    // do whatever you want with the element.
    var div = document.getElementById('outputDiv');
    div.innerHTML += "<a href='' style='margin-left:10px'>"+newtext+"</a><br>";
}