Question

我正在使用AngularJS开发一个应用程序。在我的应用程序的某些部分，我有一个按钮，当我点击该按钮时，它会添加一个新输入来添加电话。对于每个输入，都有一个删除链接来删除该输入。

使用我的代码，我正在使用计数器。

由于某些原因，我无法做到正确！

查看：

$scope.removeDIV = function (arrAddr) {
    console.log("Array Index = " + arrAddr);
    var iEl = angular.element(document.querySelector('#div' + arrAddr));
    iEl.remove();
    if ($scope.count > 0) {
        $scope.count = $scope.count - 1;
        console.log($scope.count);
    }                
}

$scope.addDIV = function () {
    if ($scope.count <= 2) {
        angular.element(document.getElementById('space-for-new-telephones')).append("<div id='div" + $scope.count + "'><input type='text' ng-model='$scope.telephone.num[" + $scope.count + "]' maxlength='15'>&nbsp;<a href='javascript:void(0)' ng-click='removeDIV(" + $scope.count + ")'>Remove</a></div>");
        $scope.count++;
        console.log($scope.count);
    }        
}

JS：

ng-click='removeDIV(" + $scope.count + ")'

我的问题是通过按下按钮手动添加它们的输入...看起来我的append命令有问题。

<div class="SomeID">
<p>What a voice! </p>
</div>

我可以添加元素并在视图中显示它，但以后不能删除它。

请注意，使用ng-repeat的视图中的元素正常工作，我可以删除它们。

Answer 1

未尝试运行您的代码，但我认为以下代码将解决您的问题

    var html = "<div id='div" + $scope.count 
      + "'><input type='text' ng-model='$scope.telephone.num[" 
      + $scope.count + "]' maxlength='15'>&nbsp;"
      +"<a href='javascript:void(0)' ng-click='removeDIV(" 
      + $scope.count + ")'>Remove</a></div>"

    angular.element(document.getElementById('space-for-new-telephones'))
    .append($compile(html)($scope));

Answer 2

你不应该像角度那样操纵DOM。您应该操纵代码中的数据，并让DOM反映这些更改。就像你在代码的第一个div中使用ng-repeat="cEdit in telephone"一样。您可以在$scope中创建一个阵列来容纳所有新电话。然后使用ng-repeat添加和删除数组中的项目，以呈现现有项目，而不是append和remove。

如果确实需要操作DOM，则应使用指令 - https://docs.angularjs.org/guide/directive

以下是有关DOM操作概念的更多信息 - http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/

Answer 3

你的id="div{{$index}}"应该包装好 "space-for-new-telephones"，或者你可以打电话给它 "space-for-telephones"或者您可以删除包装器。
插入像angular.element(document.getElementById('space-for-new-telephones')).append("<div id='div" + $scope.count + "'><input type='text' ng-model='$scope.telephone.num[" + $scope.count + "]' maxlength='15'> <a href='javascript:void(0)' ng-click='removeDIV(" + $scope.count + ")'>Remove</a></div>");这样的新电话时，您不必操纵doms（视图）。只需修改模型和＆＃34;视图＆＃34;会相应改变。$scope.telephones.push("");
与2相同，删除电话字段也应通过操纵模型来实现：$scope.telephone.splice(arrAddr,1);
如果您有重复的电话号码，请使用track by以避免错误报告，并使用ng-model="telephone[$index]"立即在$ scope上同步输入和模型。

所以代码应该是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body ng-app="teleApp" ng-controller="tele">
    <div id="div{{$index}}" style='z-index: 1' ng-repeat="cEdit in telephone track by $index" ng-show="contactsElements">
        <input type="text" ng-model="telephone[$index]" maxlength="15">
        <a href="javascript:void(0)" ng-click="removeDIV($index)">Remove</a>
    </div>
    <div ng-show="contactsElements">
        <button ng-click="addDIV()">Add</button>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="index.js"></script>
</html>

JS代码：

var teleApp = angular.module("teleApp", []);
teleApp.controller("tele",function($scope){
    $scope.contactsElements = true;
    $scope.count = 0;
    $scope.telephone = [
    ]

    $scope.removeDIV = function (arrAddr) {
        console.log("Array Index = " + arrAddr);
        $scope.telephone.splice(arrAddr,1);
        if ($scope.count > 0) {
            $scope.count = $scope.count - 1;
            console.log($scope.count);
        }
    }

    $scope.addDIV = function () {
        if ($scope.count <= 2) {
            $scope.telephone.push('');
            $scope.count++;
            console.log($scope.count);
        }
    }
})

Answer 4

<div style='z-index: 1' ng-repeat="cEdit in telephone" ng-show="contactsElements">
<input type="text" ng-model="phone.number" maxlength="15">
<a href="javascript:void(0)" ng-click="remove(telephone, $index)">Remove</a> 
</div>
<div ng-show="contactsElements">
<div id="space-for-new-telephones"></div>
<button ng-click="add(telephone, phone)">Add</button>                                                
</div>


$scope.remove = function (telephone, $index) {
    delete telephone[$index];
}

$scope.add= function (telephone, phone) {
   telephone.push(phone)
}

你对角度的工作方式不太了解

编辑：
好吧，我建议你看一下这个工作fiddle 有你想知道的一切。

句子你出席是在工作，但错误回答我的朋友！

我建议，不要使用splice作为从数组中删除，因为重建索引存在问题。
想象一下，当你解析$ http请求时，你会删除一个删除按钮，并删除索引为0的项目。你做的一切都很好！

当您点击此按钮3次并且所有这些解决方案将等待解决时，有线程将删除错误的项目

现在我希望你会欣赏这种与拼接有关的问题由我为你特别编辑fiddle

事情是快速按下第二个按钮3次，看看刚刚发生了什么。

我有很多角度的exp。不要怪我说实话我的朋友，希望你得到这个教训

使用元素计数器的angular.element问题

4 个答案: