AngularJS在ng-repeat内部工作中重新渲染

Question

以下代码包含输入框，单选按钮和按钮。

单击该按钮时，它将再生成一个输入框和单选按钮。所有的单选按钮都名称相同。

  <ul ng-repeat="i in addQuestion.loop(addQuestion.numOfChoice) track by $index">
    <li>
        answers:<input type="text"/>
        correct:<input type="radio" name="correctChoice" value ={{$index}}/>
    </li>
  </ul>
  <button ng-Click="addQuestion.numOfChoice = addQuestion.numOfChoice + 1">add more choices</button><br/><br/>

//控制器：

$scope.addQuestion = {
  numOfChoice: 1,
  loop: function(num){
    return new Array(num);
  }
}

我的问题是，当我成功地按照我想要的方式完成这项工作时。 我不知道每当numOfChoice增加时，'魔术'如何在重新渲染时起作用。

两个问题：

1. 在ng-repeat中，它调用接受参数的函数loop：参数的更改如何触发重新渲染，从而导致循环再次运行。我会理解它是否是一个变量。

2. 每当我点击“添加更多”时，它会再渲染一个输入框和单选按钮，我不明白以前渲染的输入框/框的状态是如何保留的。在像reactJS这样的东西中，它将重新渲染整个东西，除非我将它存储在某个地方，否则所有状态都会丢失。它如何在重新整个ng-repeat循环的同时存储所有状态。或者它不会重新运行ng-repeat而是执行其他操作？它与索引有关吗？

希望我明白我的问题，请告诉我。

Answer 1

1. 函数循环返回ngRepeat正在跟踪的新对象。因此，当ng-repeat循环变量的值发生变化时，它会触发新的渲染。
2. ngRepeat会跟踪集合中的所有项目及其相应的DOM元素。因此，如果该项目已存在，则不会重新渲染。