删除动态股利与角

我想通过点击删除按钮删除动态添加的股利。为了方便，我创建了这个小提琴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

删除动态股利与角

回答

相关问题