問題與angular.element使用計數器的元素

我正在開發一個使用AngularJS的應用程序。在我的應用程序的某個部分，我有一個按鈕，當我單擊該按鈕時，它會添加一個新的輸入來添加電話。對於每個輸入，都有一個刪除鏈接來刪除該輸入。問題與angular.element使用計數器的元素

用我的代碼，我使用計數器。

由於某些原因，我無法弄清楚它！

查看：

<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'>&nbsp;<a href='javascript:void(0)' ng-click='removeDIV(" + $scope.count + ")'>Remove</a></div>"); 
     $scope.count++; 
     console.log($scope.count); 
    }   
}

我的問題是我手動按下按鈕，將它們添加輸入......它看起來像我有追加一個問題命令。

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

我能夠添加元素並將其顯示在視圖中，但以後無法將其刪除。

請注意，已經在視圖中使用ng-repeat的元素正常工作，我可以刪除它們。

來源

2016-06-28 Ahmad Shli

沒試過運行你的代碼，但我認爲下面的代碼將解決你的問題

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

來源

2016-06-28 06:05:07

有什麼區別？它和我的代碼一樣。此外，除非我使用指令，否則此代碼不起作用。 –

我想如果你添加$ compile作爲依賴項，它將在控制器上工作 –

謝謝阿布蘇菲，我會試試這個，如果它能工作，我會盡快給你回覆 –

你不應該像操縱與角的DOM。您應該操作代碼中的數據，並讓DOM爲您反映這些更改。就像你在ng-repeat="cEdit in telephone"的代碼中的第一個div一樣。您可以在您的$scope中創建一個陣列以容納所有新電話。然後使用ng-repeat來渲染現有項目，而不是使用append和remove來添加和刪除陣列中的項目。

如果你需要操作DOM，你應該使用指令 - https://docs.angularjs.org/guide/directive

下面是關於DOM操作概念的一些進一步的信息 - http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/

來源

2016-06-28 06:06:59

非常感謝，我明白你的觀點。我會嘗試更改我的代碼，然後我會回覆你。我只有一個問題，一旦我在$ scope中的數組中進行更改，我如何調用ng-repeat來呈現新的更改？ –

@AhmedAlsahli - 你不需要。角度監視範圍的變化，併爲您更新DOM。這是你不應該用jQuery來做的主要原因，因爲它可能會與角度衝突。有些情況下角度不知道範圍更改（IE .:異步更新）。在這些情況下，您可以使用'$ apply'，'$ timeout'或'$ digest'。更多信息在這裏 - https://www.sitepoint.com/understanding-angulars-apply-digest/ –

-1

<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作爲從數組中刪除，因爲reindexing存在問題。
想象一下，當您解析$ http請求時，您會推送一個刪除按鈕，並刪除索引爲0的項目。一切都很好，就像你做過一次一樣！

當你點擊這個按鈕3次，所有這些決心將等待的決心，有跟帖說錯誤的項目將被刪除

現在我希望你會很高興和剪接approche這個的exaple 上專門編着我對你的fiddle

事情是按第二個按鈕快3倍，看看到底發生了什麼。

我在角度上得到了很多exp。不要怪我實話告訴我的朋友，希望你得到這個教訓

來源

2016-06-28 06:48:57 Janko

這將是更好的寫你的建議，而不是告訴我，我有壞的想法，它是如何工作的！我是Angular的新手，我仍然在學習。那麼，你怎麼解釋，所以我們可以向你學習 –

順便說一下，刪除不會從數組中刪除一個項目！ '$ scope.telephone.splice（$ index，1）;'是正確的句子。謝謝 –

你id="div{{$index}}" S的關係被包裝成 "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（查看）。只需修改模型，「視圖」就會相應改變。 $scope.telephones.push("");
同爲2，去掉了電話領域也應該通過操縱模型來實現：$scope.telephone.splice(arrAddr,1);
使用track by避免錯誤報告，當你有重複的電話號碼，並用ng-model="telephone[$index]"在$投入和模型之間同步立即範圍。

所以代碼應該是：

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

來源

2016-06-28 08:24:37

問題與angular.element使用計數器的元素

回答

相關問題