javascript - Angular : custom filter infinite digest

Question

<分区>

Answer 1

在您的代码片段中，您似乎正在彻底改变数据结构。

Angular 过滤器并不意味着对对象进行深度更改。顾名思义，它们是用来过滤信息的。如果您的数据操作要求您更改数据结构，那么您可能做错了。

事实上，在它的循环摘要中，Angular 本身就足够聪明，可以成功比较:

• 任何类型的字符串(文字和字符串对象)——"foo"等于 new String("foo")

• 按元素排列的一维数组 ['a', 'b', 'c'] 等于 new Array(['a', 'b', 'c'])

• 1 维对象的元素 foo={a:'a', b:'b'} 等于 bar={a:'a', b:'b'}

但是，对于多维数组或对象，事情开始变得一团糟。例如，从过滤器返回一个像这样的新数组 ['a', 'b', ['c', 'd']] 将导致摘要循环中的无限循环，因为比较 oldValue 和 NewValue 总是错误的。你可以说 Angular 执行的是浅层比较。

总而言之，在过滤器中返回新的多维对象或数组将达到无限的 $digest 错误。

---

如果我有一个复杂的多维数据结构，需要进行一些深层次的比较怎么办？

如果您不在每个循环中创建新对象，那么没有什么能阻止您进行深入比较。但是，数据的结构应该正确。

例如，在您的情况下，您似乎正在使用对象作为键映射，如下所示:

var subjectBin = {
        faculty1: {
            subject1: ['math'],
            subject2: ['science', 'history'],
            subject3: ['foo', 'blabla'],
            subject4: ['unraveling', 'the mistery']
        },
        faculty2: {
            subject1: ['that', 'all'],
            subject2: ['started', 'with a'],
            subject3: ['foo', 'blabla'],
            subject4: ['bigbang', 'BANG!']
        }
    };

这是一个很难过滤的结构，因为没有通用模式(事实上，在您的过滤器中您使用了 3 个循环!!!)。

您可以像这样重组信息:

var subjectBin = [{
        facultyName: 'faculty1',
        subjects: [{
            subjectName: 'subject1',
            courses: ['math']
        }, {
            subjectName: 'subject2',
            courses: ['science', 'history']
        }]
    }];

这会更容易使用。事实上，你甚至不需要自定义过滤器，你可以使用默认的 Angular 过滤器进行简单的比较

这里还有一个数据重组逻辑的例子( fiddle )。

var app = angular.module('app', []);

app.controller('fooCtrl', ['$scope',
  function($scope) {
    var bla = {
      faculty1: {
        subject1: ['math'],
        subject2: ['science', 'history'],
        subject3: ['foo', 'blabla'],
        subject4: ['unraveling', 'the mistery']
      },
      faculty2: {
        subject1: ['that', 'all'],
        subject2: ['started', 'with a'],
        subject3: ['foo', 'blabla'],
        subject4: ['bigbang', 'BANG!']
      }
    };


    $scope.items = [];

    angular.forEach(bla, function(value, key) {
      var faculty = {
        name: key,
        subjects: []
      };

      angular.forEach(value, function(value, key) {
        var subject = {
          name: key,
          courses: value
        };
        faculty.subjects.push(subject);
      });
      $scope.items.push(faculty);
    });

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="fooCtrl">
    <ul>
      <li ng-repeat="faculty in items">Faculty Name: {{faculty.name}}
        <br/>
        <ul>
          <li ng-repeat="subject in faculty.subjects | filter:{courses:['foo']}">Subject name: {{subject.name}}
            <br/>
            <ul>
              <li ng-repeat="course in subject.courses">{{course}}</li>
            </ul>
          </li>
        </ul>Subjects: {{item.subjects}}</li>
    </ul>
  </div>