AngularJS中ng-repeat无法打印自定义计数变量当前值问题

我来帮你分析下问题所在，然后给出可行的解决方案：

问题根源 #

你当前的代码有两个关键问题导致无法显示count1的当前值：

1. 一次性绑定的限制：你用了{{::$parent.count1}}这种一次性绑定语法，它会在AngularJS的digest循环结束后取最终的count1值，所以所有循环项都会显示最后一次递增后的结果，而不是当前循环的数值。
2. 作用域与基本类型的遮蔽：虽然你用了$parent.count1，但AngularJS的ng-repeat会创建独立的子作用域，对于基本类型的变量，直接操作$parent容易出现作用域混淆，而且每次循环的自增操作会直接修改父作用域的变量，导致所有项共享最终值。

修复方案 #

我们可以通过用对象包装计数变量+移除一次性绑定来解决这个问题，同时让代码更易维护，方便后续添加自定义计数条件：

修改后的HTML代码

<div ng-app="app" ng-init="counter = { count1: 1 }">
  <h1>AngularJS Directive Controllers</h1>
  <div ng-repeat-start="a in [1, 2, 3, 4, 5]" ng-init="counter.count1 = counter.count1 + 1"></div>
  <div> abc {{ a }} - {{ counter.count1 }} </div>
  <div ng-if="counter.count1 % 2 == 0">breakline</div>
  <div ng-repeat-end></div>
</div>

为什么这样有效？

• 对象包装避免作用域问题：把count1放在counter对象里，利用AngularJS作用域的原型继承特性，子作用域可以直接修改父作用域对象的属性，不用依赖$parent，避免了作用域遮蔽问题。
• 移除一次性绑定：使用{{ counter.count1 }}代替一次性绑定，这样每次ng-repeat循环时都会获取到当前的计数值，而不是最终结果。

扩展：添加自定义计数条件 #

如果你后续需要为计数添加更多条件，推荐把计数逻辑放到控制器的函数里，让代码更清晰：

控制器代码

angular.module('app', [])
  .controller('MainCtrl', function($scope) {
    $scope.counter = { count1: 1 };
    $scope.items = [1, 2, 3, 4, 5];
    
    // 自定义计数逻辑
    $scope.updateCount = function(item) {
      // 示例：只有当item大于2时才递增计数
      if (item > 2) {
        $scope.counter.count1++;
      }
    };
  });

对应的HTML代码

<div ng-app="app" ng-controller="MainCtrl">
  <h1>AngularJS Directive Controllers</h1>
  <div ng-repeat-start="a in items" ng-init="updateCount(a)"></div>
  <div> abc {{ a }} - {{ counter.count1 }} </div>
  <div ng-if="counter.count1 % 2 == 0">breakline</div>
  <div ng-repeat-end></div>
</div>

这样你可以在updateCount函数里任意扩展计数条件，完全满足你的需求。

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