AngularJS：在ng-repeat中为多个元素分配函数输出值

我来帮你搞定这个问题！你当前的写法之所以失效，核心原因是AngularJS的脏检查机制会重复执行模板里的表达式——每次digest循环触发时，{{ randomId = $ctrl.GenerateRandomId() }}都会重新生成新ID，导致checkbox的id和label的for属性不断变化，不仅绑定失效，还可能引发性能问题。下面给你两种靠谱的解决方案：

方案一：提前为每个Item生成固定ID（推荐） #

这种方法最直接，在控制器初始化时就给每个item分配唯一ID，后续模板直接复用这个ID，避免重复生成。

控制器代码 #

var self = this;
self.items = [/* 你的业务数据数组 */];

// 初始化阶段为每个item添加唯一ID
self.items.forEach(function(item) {
  item.uniqueId = self.GenerateRandomId();
});

self.GenerateRandomId = function() {
  // 这里用你自己的生成逻辑，示例是生成随机字符串
  return Math.random().toString(36).slice(2, 15) + Math.random().toString(36).slice(2, 15);
};

模板代码 #

<li ng-repeat="item in $ctrl.items">
  <input id="{{ item.uniqueId }}" type="checkbox" />
  <label for="{{ item.uniqueId }}">{{ item.labelText }}</label>
</li>

优势：ID仅生成一次，绑定稳定，完全符合AngularJS的数据流规范，不会触发不必要的重复计算。

方案二：用自定义指令封装Checkbox-Label组合 #

如果不想修改原item的数据结构，可以用自定义指令来封装这对控件，每个指令实例独立生成唯一ID。

指令代码 #

angular.module('yourAppModule').directive('checkboxLabelPair', function() {
  return {
    scope: {
      labelContent: '@' // 传递label显示的内容
    },
    template: `
      <input id="{{ internalId }}" type="checkbox" />
      <label for="{{ internalId }}">{{ labelContent }}</label>
    `,
    link: function(scope) {
      // 在指令初始化时生成唯一ID
      scope.internalId = GenerateRandomId();

      function GenerateRandomId() {
        return Math.random().toString(36).slice(2, 15) + Math.random().toString(36).slice(2, 15);
      }
    }
  };
});

模板代码 #

<li ng-repeat="item in $ctrl.items">
  <checkbox-label-pair label-content="{{ item.labelText }}"></checkbox-label-pair>
</li>

优势：隔离了ID生成的逻辑，不污染原数据，指令可复用，适合多个地方需要相同控件组合的场景。

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