AngularJS中嵌套ng-repeat如何实现子项作用域值唯一？

我看了你的问题，核心问题在于所有父级的serviceTemplate共享了同一个全局的serviceParameters数组，所以不管你在哪个父项里添加参数，都会同步到所有子列表里。咱们来调整一下结构，让每个serviceTemplate拥有自己独立的参数集合就好啦！

你现在把serviceParameters定义在serviceTemplateCode下面作为全局数组，每个父级的ng-repeat="serviceParam in serviceTemplateCode.serviceParameters"都会遍历同一个数组，自然所有子项的参数都是完全同步的，没法做到每个父模板有独立的参数。

把参数数组嵌套到每个serviceTemplate对象内部，这样每个父级条目都有自己专属的参数列表，各自的作用域就独立了。

修改后的AngularJS代码 #

function serviceCtrl($scope) {
  $scope.serviceTemplateCode = {};
  $scope.serviceTemplateCode.serviceTemplates = [];

  // 辅助函数：创建带空参数数组的新模板对象
  function createNewServiceTemplate() {
    return {
      serviceParameters: [] // 每个模板拥有自己的参数集合
    };
  }

  // 初始化第一个模板，同时给它加一个空参数
  const firstTemplate = createNewServiceTemplate();
  firstTemplate.serviceParameters.push({});
  $scope.serviceTemplateCode.serviceTemplates.push(firstTemplate);

  // 添加新模板的方法
  $scope.addTemplate = function() {
    const newTemplate = createNewServiceTemplate();
    newTemplate.serviceParameters.push({}); // 新模板默认带一个空参数
    $scope.serviceTemplateCode.serviceTemplates.push(newTemplate);
  };

  // 修改添加参数的方法：接收当前模板对象，给该模板的参数数组加新项
  $scope.addParameter = function(template) {
    template.serviceParameters.push({});
  };
}

修改后的HTML代码 #

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="serviceCtrl">
    <ul class="unstyled">
      <li ng-repeat="serviceTemp in serviceTemplateCode.serviceTemplates">
        <input type="text" placeholder="e.g. https://stream.twitter.com/1.1/statuses/filter.json" ng-model='serviceTemp.url'> {{serviceTemp.url}}
        <ul>
          <!-- 现在遍历当前模板自己的serviceParameters数组 -->
          <li ng-repeat="serviceParam in serviceTemp.serviceParameters">
            <input type="text" placeholder="param" ng-model='serviceParam.param'> {{serviceParam.param}}
            <!-- 把当前模板对象传给addParameter，明确要给哪个模板加参数 -->
            <button ng-click='addParameter(serviceTemp)'> addParam </button>
          </li>
        </ul>
      </li>
    </ul>
    <!-- 新增按钮用来添加父级模板 -->
    <button ng-click='addTemplate()'>Add Template</button>
  </div>
</div>

关键调整说明 #

• 每个serviceTemplate对象内部新增serviceParameters数组，实现了参数的隔离，不同模板的参数不再共享
• addParameter函数现在需要接收当前模板对象，这样就能精准地给对应的模板添加新参数
• HTML中子级的ng-repeat目标改为当前serviceTemp的serviceParameters，而不是全局的数组

这样调整之后，每个父级模板都有自己独立的参数列表，修改或添加参数只会影响当前模板的子项，不会同步到其他模板啦！

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