在angular-selectize指令中使用filter过滤选项时触发[$rootScope:infdig]错误

这个[$rootScope:infdig]错误是Angular脏值检测机制的典型问题，我来帮你拆解原因和解决办法：

问题根源 #

你在模板的options参数里直接使用Angular的filter过滤器（比如myOptions2 | filter: {class: "mammal"}）——这个过滤器每次执行都会返回一个全新的数组对象，哪怕数组里的内容和上一次完全一致。

Angular的脏值检测会对比options的引用，发现每次都是新对象，就会认为数据发生了变化，于是触发新一轮的$digest循环。而每次循环又会重新执行过滤器生成新数组，这样往复超过10次后，Angular就会终止循环并抛出这个错误。

解决方案：在控制器中预处理过滤后的选项 #

最稳妥的方式是把过滤逻辑移到控制器里，维护一个稳定的过滤后数组引用，只有当原数组内容真的变化时才更新它：

1. 控制器中添加过滤逻辑 #

angular.module('yourApp').controller('YourCtrl', function($scope, $filter) {
  // 你的原始选项数组
  $scope.myOptions2 = [
    {name: 'Dog', class: 'mammal'},
    {name: 'Snake', class: 'reptile'},
    {name: 'Cat', class: 'mammal'},
    // ...其他选项
  ];

  // 初始化过滤后的哺乳动物数组
  $scope.filteredMammalOptions = $filter('filter')($scope.myOptions2, {class: "mammal"});

  // 监听原始数组的变化，实时更新过滤结果
  $scope.$watch('myOptions2', function(newOptions) {
    if (newOptions) {
      $scope.filteredMammalOptions = $filter('filter')(newOptions, {class: "mammal"});
    }
  }, true); // 第三个参数true表示深度监听数组内容的变化，而不只是引用变化
});

2. 修改模板中的selectize指令 #

把options参数换成我们预处理好的数组：

<selectize 
  placeholder='Pick some things...' 
  options='filteredMammalOptions' 
  config="myConfig2" 
  ng-model="myModel3" 
  ng-disabled='disable' 
  required='true'
></selectize>

这样处理后，filteredMammalOptions只有在原始数组内容真的改变时才会更新引用，不会触发不必要的$digest循环，自然就解决了报错问题。

内容的提问来源于stack exchange，提问作者Petran