角を使って動的divを削除する

Question

削除ボタンをクリックしてdivを動的に削除しようとしています。 私は便宜のためにこのフィドルhttps://jsfiddle.net/y4punqp3/2/を作成しました。

remove関数

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

削除ボタンをクリックしたときに、対応する行が削除されるべきです。 私は何が欠けていますか？

Answer 1

クリーンなソリューションのための更新フィドルチェック：角度で

を、あなたはあなたのコントローラ内のデータを持っていると思いますが、モデルを表し、そしてあなたのテンプレートは、そのモデルに基づいたものを描画します。手動でディレクティブ以外の方法で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操作のどれも描画されません。

EDIT：あなたは角間違っを使用しているhttps://stackoverflow.com/a/15012542/3368834