Question

当我尝试在点击时显示所选元素值时，它显示所有元素值..如果我添加了用户名，则在下面的代码中，当我们点击任何标签时，它必须显示相应的删除图标..但是这里它向所有添加的标签显示删除图标。请你告诉我如何解决这个问题？

＆＃13;

var app = angular.module('myapp', ['ngSanitize']);
var counter = 0
app.controller('MainCtrl', function($scope, $compile) {
  $scope.add = function(index) {
        var username = '<div ng-click="showRemove()"><label>User Name</label>//click//<input type="text"><button id="buttonId'+counter+'" ng-show="remove">-</button></div>';
        var user = $compile(username)($scope);
        angular.element(document.getElementById('add')).append(user);
            };
            $scope.showRemove = function(){
              $scope.remove = true;
            }
++counter;
    });

＆＃13;

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button ng-click="add($index)">Add</button>
<hr>
	<div id="add"></div>
	</body>

</html>

＆＃13;

Answer 1

使用委托的jQuery事件处理程序而不是内联事件处理程序来动态添加元素。如果你使用jQuery，jQuery方式会更好。

将类添加到删除按钮，例如class="deleteme"：

var username = '<div ng-click="showRemove()"><label>User Name</label>//click//<input type="text"><button id="buttonId'+counter+'" ng-show="remove" class="deleteme">-</button></div>';

然后处理程序变为

$(document).on('click', '.deleteme', function(){
    $(this).closest('div').remove();
});

document只是动态元素的共同祖先。它可以是用户条目之上的任何共同祖先。

说明：

委派的事件处理程序通过监听事件（单击）来冒泡到共同的祖先。如果没有其他更接近/方便的话，document是最好的默认值。然后，他们在事件时将jQuery选择器应用于bubble-chain中的元素。然后它将您的函数应用于仅导致事件的匹配元素。传递给事件函数的this值将是单击的匹配项。
内联处理程序（如onclick=""）将您的事件注册与事件处理程序分开，没有任何好处。
您应该尝试选择最接近的共同祖先作为委托事件的目标元素。即使document高一级，但默认优于body，因为body在某些情况下可能会失败。
委派事件的连接速度比单个事件处理程序快。权衡是在事件发生时速度略有下降但是（并且它很大但是），事件时间的速度差异永远不会被注意到，因为你不能每秒点击一次鼠标50,0000次：）

Answer 2

如果你想要接近你试图解决它的方式，这可能是一个解决方案：

var app = angular.module('myapp', ['ngSanitize']);
var counter = 0
app.controller('MainCtrl', function($scope, $compile) {
    $scope.add = function(index) {
       var username = '<div ng-click="showRemove('+counter+')"><label>User Name</label>//click//<input type="text"><button id="buttonId'+counter+'" ng-show="'+counter+ ' == active">-</button></div>';
       var user = $compile(username)($scope);
       angular.element(document.getElementById('add')).append(user);
       ++counter;
   };
   $scope.showRemove = function(counter){
       $scope.active = counter;
   }

   $scope.active = -1;
});

仅显示动态添加的选定元素值

2 个答案:

说明：