刪除動態股利與角

我想通過點擊刪除按鈕刪除動態添加的股利。爲了方便，我創建了這個小提琴https://jsfiddle.net/y4punqp3/2/。刪除動態股利與角

REMOVE功能

$scope.removeUnavailability = function() { 
    --numUnavail; 
    document.getElementById("tempUnavail").remove(); 
}

相應行應刪除按鈕點擊時被刪除。我錯過了什麼？

來源

2017-03-07 Dad85

您使用的角度不對。你不想手動操作DOM，你想在你的控制器中有一個模型來表示你的應用程序的當前狀態，並且你的模板應該能夠自動適應這些數據......給我一點時間，我會改變你的小提琴要有角度的方式。 – Fissio

您問題中的代碼不是[mcve]。你需要在問題本身**中提供一個MCVE **。鏈接到JS Fiddle **上的代碼與問題**中的代碼不匹配。 – Quentin

@Quentin'在JS Fiddle上鍊接的代碼與問題中的代碼不匹配.'小提琴已經足夠接近代碼中的問題，它不應該成爲問題 – Fissio

檢查更新搗鼓一個乾淨的解決方案：

在折角，你想在你的控制器中的數據表示模型，並基於該模型模板畫的東西。您不希望手動添加/刪除HTML或以任何方式在指令之外編輯DOM，否則您只是在腳下拍攝自己，而您並沒有真正以任何有意義的方式使用角色。

JS：

var app = angular.module("satUnav-app", []); 
app.controller("satUnav-ctrl", function($scope) { 

    $scope.unavailabilities = []; 

    $scope.addUnavailability = function() { 
    $scope.unavailabilities.push({}); 
    } 

    $scope.removeUnavailability = function (idx) { 
    $scope.unavailabilities.splice(idx, 1); 
    } 
});

HTML：

<div ng-repeat="unavail in unavailabilities"> 
    <select ng-model="unavail.selection"> 
     <option>PRN 01 (ID:401)</option> 
     <option>PRN 02 (ID:402)</option> 
     <option>PRN 03 (ID:403)</option> 
     <option>PRN 04 (ID:404)</option> 
    </select> 
    <label for="tempUnavail">Start</label> 
    <input type="datetime-local" ng-model="unavail.start"> 
    <label for="tempUnavail">Stop</label> 
    <input type="datetime-local" ng-model="unavail.stop"> 
    <button type="button" data-ng-click="removeUnavailability($index)">Remove</button> 
</div>

現在我們有非常乾淨的角碼在那裏可以很容易地添加/刪除div的只是基於該視圖編輯陣列範圍變量被繪製 - 沒有那愚蠢的DOM操作。

編輯：而在這些jQuery的角度的問題一如既往，看看這裏的答案：https://stackoverflow.com/a/15012542/3368834

來源

2017-03-07 10:26:09 Fissio

謝謝Fissio。它工作正常。儘管如此，我仍然很難理解ng模型的概念。我知道它提供了一種html輸入和角度變量之間的「橋樑」，但我仍不清楚它是如何工作的。據我所知，用「unavail.selection，unavail.start和unavail.stop」你正在創建3個變量，代表用戶選擇什麼。這些變量可以在角度腳本中處理（例如用於驗證）。這是對的嗎？ – Dad85

@Fisso：我怎麼可以修改你的小提琴，使點擊時出現的選擇菜單中的第一個選項不是空的可選單元，而是像「選擇一個」這樣的標題？ – Dad85

@ Dad85在你的第一個評論，是的，這幾乎是 - 你可以檢查ng-model的文檔以瞭解它如何與不同的輸入一起工作等等。關於第二個問題，這裏是一個更新的小提琴，帶有默認選擇的選項，只需將'value =「」'設置爲您想要的選項：https：// jsfiddle。net/y4punqp3/6/ – Fissio

刪除動態股利與角

回答

相關問題