4

我们可以使用 jquery 轻松删除类似的内容，但是我们可以使用 angular 来执行类似的操作吗？

<tr>
<td *ngFor="#lev of rubric?.criteria[0].levels">
                    <button class="close removeLevel" (click)="onClickRemove($event)">&times;</button>
                    <input type="text" class="form-control" placeholder="Performance Level"
                           #level="ngForm"
                           [(ngModel)]="lev.level"
                           ngControl="level"
                    />
</td>
</tr>

在 Component.ts 中：

onClickRemove($event) {
}

如何在此处访问引发事件的行或单元格元素？

4

2 回答 2

6

从您的问题来看，您想在按下删除按钮时删除该行。在 Angular 中，您必须做的是从模型中删除记录。因此，只需将行 id 传递给 ng-controller 独有的东西并将其从模型中删除。

所以如果你有类似下面的东西

 <td *ngFor="#lev of rubric?.criteria[0].levels">
                    <button class="close removeLevel" ng-click="onClickRemove($index)">&times;</button>
                    <input type="text" class="form-control" placeholder="Performance Level"
                           #level="ngForm"
                           [(ngModel)]="lev.level"
                           ngControl="level"
                    />
</td>

在控制器中

$scope.onClickRemove=function(index)
{
   //Replace your model here 
   rows.splice(index, 1);
}
于 2016-01-16T05:18:55.747 回答
5

使用像 Angular 这样的变化检测框架的美妙之处在于你只需要修改你的模型，你的视图就会自动更新。无需自己修改 DOM。

以下是它的工作原理：

  • Angular 使用Zone.js来修补（拦截）在 Angular 内部发生的所有浏览器的异步事件（如鼠标点击）。因此，我们放入组件中的任何事件绑定都将被猴子修补。
  • Angular 构建了一个组件树，树中的每个节点也有一个变化检测器对象（你可以通过注入来获取它的引用ChangeDetectorRef）。它跟踪所有视图绑定，并记住每个绑定的最后一个值。
  • 当事件触发时，您的事件处理程序/回调函数将执行。当它完成时，由于 Zone.js 猴子补丁，它会调用 Angular 的更改检测算法。该算法遍历树（一次）并使用这些变化检测器对象查找变化。如果它发现任何变化，它会在必要时更新组件（例如，如果输入属性发生变化），然后更新 DOM。
  • 更改检测结束，浏览器再次获得控制权，看到 DOM 更改并更新您在屏幕上看到的内容。
于 2016-01-16T16:36:06.037 回答