AngularJS repeater循环次数异常，预期1个<li>却生成5个

作为AngularJS新手遇到这种循环次数和预期不符的问题确实挺闹心的，我帮你梳理几个最可能的原因，你可以逐一排查：

• 先检查绑定的数据源长度：ng-repeat的循环次数完全由你绑定的数组/对象长度决定。如果生成了5个<li>，大概率是你ng-repeat绑定的数组有5个元素，或者绑定的对象有5个可枚举属性。建议在控制器里加一行console.log($scope.yourDataSourceName)，打开浏览器控制台看看数据源的实际结构和长度——比如是不是不小心把一个长度为5的数组传进去了？

• 排查是否存在嵌套ng-repeat：有时候可能在父元素或者子元素里不小心多写了一个ng-repeat，导致嵌套循环。比如外层循环一次，内层循环5次，看起来像是一个repeater生成了5个元素，但实际是两层循环的结果。仔细检查你的HTML结构，确保只有一个ng-repeat作用在<li>或者它的直接父元素上。

• 检查是否有重复加载的模板/指令：如果你的页面里用了ng-include或者自定义指令，有没有可能重复引入了包含这个ng-repeat的模板？或者指令本身被多次调用，导致重复渲染？

• 确认track by的使用（如果用到的话）：虽然这种情况更多是导致重复渲染相同元素，但如果你的数据源里有重复的对象，又没加track by，Angular可能会因为无法区分元素而重复创建。不过如果你的预期是1个元素，还是先回到数据源的检查上。

举个简单的正确示例参考：
假设你要生成1个<li>，控制器里的数据源应该是长度为1的数组：

// app.js里的控制器
app.controller('MyController', function($scope) {
  $scope.myItems = [{content: "这是唯一的列表项"}];
});

对应的HTML：

<ul>
  <li ng-repeat="item in myItems">{{item.content}}</li>
</ul>

如果这些排查都没解决问题，建议把你的HTML和app.js相关代码片段贴出来，这样能更精准地帮你定位问题！

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