Question

我有一个对象列表，并使用

填充

<div ng-if="model.ready" class="d-group" ng-repeat="group in model.groupedD">
    <d-card ng-repeat="summary in group |
    filter: {dStatusId: model.statusFilter} |
    filter: {isD: model.typeFilter} track by summary.pDId"

我想从groupD中更改一个对象，并将其从DOM中删除（我正在更改对象的某些值）。我研究了使用MutationObserver（https://nitayneeman.com/posts/listening-to-dom-changes-using-mutationobserver-in-angular/）侦听DOM更改，我认为这是实现此目的的方法。但看起来很复杂。

当我删除对象时，它在网页上保持不变。过滤器无效。如何让过滤器知道对象的值已更改？并将其从DOM中删除。

Answer 1

如果我正确理解了您的示例，则需要确保使用ng-repeat和filter的数据结构正确。看下面的简单例子：这是HTML模板。

<label>Search: <input ng-model="vm.searchText"></label>
<div ng-if="vm.model.ready" class="d-group" ng-repeat="group in vm.model.groupedD">
    <span ng-repeat="summary in group.summary | filter:vm.searchText">
        <span>{{summary.a}}{{summary.b}}</span>
    </span>
</div>

这是控制器功能。

let vm = this;
vm.searchText = '';

vm.model = {
    ready: true,
    groupedD: [
        {a: 1, b: 1, summary: [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}]},
        {a: 2, b: 2, summary: [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}]},
        {a: 3, b: 3, summary: [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}]}
              ]
};

return vm;

当您在输入字段中输入一些值时，假设4，与ng-repeat="summary in group.summary | filter.vm.searchText"相关的所有DOM元素都将消失。

因此，我的建议是再次仔细检查您的数据结构和过滤条件。如果不查看正在使用的整个数据结构，就很难提供答案。附注：我在示例中使用了controller as语法，如果需要的话，可以简单地改为使用$scope。

如何从DOM angularjs中删除元素

1 个答案: