通过 Angular 从 UL 中删除 LI

Removing an LI from a UL via Angular

本文关键字：删除 LI UL Angular 通过      更新时间：2023-09-26

我有一个由我的MVC控制器填充的无序列表。在该无序列表中，每个列表项上都有一个按钮，允许用户从列表中删除该列表项。

代码在数据库意义上工作，但在 UI 中，该行仍然存在于屏幕上。

工作原理：.html：

<div ng-hide="history.distLists.length == 0">
    <strong>Member of Distribution Lists:</strong>
    <div style="overflow-y: scroll; width: 100%; height: 120px;">
        <div ng-repeat="list in history.distLists">
            <span class="span9 offset1" style="min-height: 25px;">{{list.ListName}}</span>
            <span class="span1" style="min-height: 25px;">
                <button ng-show="history.currentUserIsRep" class="btn-link" ng-click="dlRemove({{list.ListId}})"><span class="btn-danger">&nbsp;X&nbsp;</span></button>
            </span>
        </div>
    </div>
</div>

控制器.js：

    $scope.dlRemove = function (listId) {
        api.dlRemove($routeParams.id, listId, function (result) {
            if (result.error) {
                notificationService.error('<h4>An error occurred removing the customer from the Distribution List.</h4>' + result.error);
            } else {
                $scope.history.distLists.splice(listId, 1);
                notificationService.success('Customer removed from Distribution List.');
            }
        });
    };

拼接是抛出错误的地方：类型错误：无法读取未定义的属性"拼接" at localhost/scripts/myPage/controllers.js：147：37

147 是拼接线，37 是"distLists"。

我的目标只是在成功将其从数据库中删除后让 dang row 消失。

除了您创建 UL 元素而不是 LI 元素之外，我注意到您将list.ListId传递给 dlRemove 函数

list.ListId是否也是distLists中该list项的索引或键？除非是这样，否则您还需要将$index传递给该函数，以便它可以调用splice $index 。

我发现开发人员工具和/或扩展（如Batarang和ng-inspector）非常适合调试范围

相关文章：