Entfernen Sie dynamische Div mit Angular

Question

Ich versuche, ein div dynamisch hinzugefügt, indem Sie auf die Schaltfläche Entfernen entfernen. Ich habe diese Geige https://jsfiddle.net/y4punqp3/2/ für die Bequemlichkeit erstellt.

Die Funktion remove

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

Die entsprechende Zeile gelöscht werden soll, wenn auf die Schaltfläche Entfernen klicken. Was fehlt mir?

Answer 1

die aktualisierte Geige für eine saubere Lösung prüfen:

In Angular Sie die Daten in Ihrem Controller das Modell und die Vorlage Sachen darstellen zu wollen auf diesem Modell zeichnen basiert. Sie möchten HTML nicht manuell hinzufügen/entfernen oder das DOM in irgendeiner Weise außerhalb der Direktiven bearbeiten, sonst schießen Sie sich nur in den Fuß und Sie verwenden nicht wirklich sinnvoll eckig.

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> 

Jetzt haben wir schön und sauber Angular Code, wo es einfach ist, divs durch Bearbeiten der Array Umfang Variable nur hinzufügen/entfernen, auf deren Grundlage die Ansicht ist gezeichnet - nichts von dieser albernen DOM-Manipulation.

EDIT: Und wie immer in diesen jQuery-Angular-Fragen, hier die Antwort finden Sie unter: https://stackoverflow.com/a/15012542/3368834