我正在使用 AngularJS 开发一个应用程序。在我的应用程序的某些部分，我有一个按钮，当我单击该按钮时，它会添加一个新的输入来添加电话。对于每个输入，都有一个删除链接来删除该输入。
在我的代码中，我正在使用计数器。
由于某些原因，我无法做到正确!
查看:
<div id="div{{$index}}" style='z-index: 1' ng-repeat="cEdit in telephone" ng-show="contactsElements">
<input type="text" ng-model="cEdit" maxlength="15">
<a href="javascript:void(0)" ng-click="removeDIV($index)">Remove</a>
</div>
<div ng-show="contactsElements">
<div id="space-for-new-telephones"></div>
<button ng-click="addDIV()">Add</button>
</div>
JS:
$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'> <a href='javascript:void(0)' ng-click='removeDIV(" + $scope.count + ")'>Remove</a></div>");
$scope.count++;
console.log($scope.count);
}
}
我的问题是我通过按下按钮手动添加它们的输入...看起来我的附加命令有问题。
ng-click='removeDIV(" + $scope.count + ")'
我可以添加元素并将其显示在 View 中，但稍后无法将其删除。
请注意， View 中已经使用 ng-repeat 的元素工作正常，我可以删除它们。
最佳答案
你不应该像使用 Angular 那样操作 DOM。您应该在代码中操作数据，并让 DOM 为您反射(reflect)这些更改。就像您在代码的第一个 div 中使用 ng-repeat="cEdit in Phone" 所做的那样。
您可以在 $scope 中创建一个数组来保存所有新电话。然后从数组中添加和删除项目，使用 ng-repeat 渲染现有项目，而不是 append 和 remove。
如果你确实需要操作 DOM，你应该使用指令 - https://docs.angularjs.org/guide/directive
以下是有关 DOM 操作概念的更多信息 - http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/
关于javascript - 使用元素计数器的 angular.element 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38067522/