在 ng-repeat 中使用“for...of”

Question

查看 ng-repeats 源代码，看起来没有任何使用 for-of 的实例。是否有任何自定义指令可以执行此操作或以其他方式在模板中实现此循环以利用迭代器函数？

带迭代器的类

class Cache{

  constructor(items){
    this.cache = {
      "one" : 1,
      "two" : 2
    };
  };

  // custom iterator that turns our cache into an array
  // for use in "for...of" loops
  [Symbol.iterator](){
    var index = 0;
    // turn cache object into array of its values (underscore method)
    var data = _.values(this.cache);

    return {
      next: function(){
        if(index < data.length){
          return {
            value: data[index++],
            done: false
          };
        }else{
          return { done:true };
        }
      }
    };
  };

};

var myCache = new Cache();
// looping my cache in simple js would look like
for(let val of myCache){
  console.log(val);
}
// 1, 2

提议的 angularjs ng-repeat 指令

<ul>
  <li ng-repeat="item in myCache track by $index"></li>
</ul>

但是这不起作用，因为 ng-repeat 没有实现 for...of。我的问题是：有没有办法让 ng-repeat 指令与具有最小接口更改的迭代器很好地配合使用，或者更好的是，一个与 ng-repeat 相同的自定义指令，它是为 @987654327 制作的@循环？

Answer 1

您可以使用Array.from 将您的可迭代源转换为一个数组，ngRepeat 将能够对其进行迭代：

<ul>
  <li ng-repeat="item in Array.from(myCache) track by $index"></li>
</ul>

理想情况下，这将发生在您的 javascript 指令/控制器中：

scope.myCache = Array.from(new Cache());

查看：

<ul>
  <li ng-repeat="item in myCache track by $index"></li>
</ul>