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

Show only Dynamically Added selected Element value

本文关键字：元素 显示 动态 添加      更新时间：2023-09-26

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

演示

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;
    });
  
<!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>

如果你想

保持接近你试图解决它的方式，这可能是一个解决方案：

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;
});

对动态添加的元素使用委托的 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选择器应用于气泡链中的元素。然后，它将您的函数仅应用于导致事件的匹配元素。传递给事件函数的this值将是单击的匹配项。
  • 内联处理程序（如 onclick=""）将事件注册与事件处理程序分开，没有任何好处。
  • 您应该尝试选择最接近元素的共同祖先作为委托事件的目标。尽管document高一级，但它是比body更好的默认值，因为在某些情况下body可能会失败。
  • 委托事件的连接速度比单个事件处理程序更快。权衡是在事件时速度略有降低，但是（这是一个很大的但是），事件时的速度差异永远不会被注意到，因为您不能每秒单击鼠标 50,0000 次:)
相关文章：