使用NG-Repeat中的$索引访问模型数组的索引

Question

我正在构建一个网页，用户必须在其中输入他们的朋友，例如姓名，电子邮件等。他们需要输入此的朋友的数量是动态的，我想将每个朋友的详细信息存储在模型中。到目前为止，我正在用标记进行这样的事情：

<div ng-repeat="a in getNoOfFriends() track by $index">
    <form name="friendForm">
        <input type="text" ng-model="friends[$index].firstName">
    </form>
</div>

和我的控制器：

function SignupController($scope, $rootScope, $location, $routeParams, params, API, Context) {
    $scope.friends = [];
    $scope.noOfFriends = 2;
    $scope.preSaveFriends = function() {
        var emptyFriend = {
            firstName: ''
        };
        for (var i = 0; i < $scope.noOfFriends; i++) {
            $scope.friends.push(emptyFriend);
        }
    };
    $scope.preSaveFriends();
}
SignupController.$inject = ['$scope', '$rootScope', '$location', '$routeParams', 'params', 'API', 'Context'];

当页面加载和控制器首次运行时，$scope.friends用属性firstName的空对象填充。我要做的是针对HTML中生成的每种形式（使用ng-repeat）更新该特定朋友的模型。

目前，似乎正在更新firstName中每个朋友的CC_4属性。当我将其名字键入输入元素时，它也会在其他每个朋友上进行更新。

如何为此输入设置模型，以作为$scope.friends的特定索引？

Answer 1

在friends数组上迭代会更自然：

<div ng-repeat="friend in friends track by $index">
    <form name="friendForm">
        <input type="text" ng-model="friend.firstName">
    </form>
</div>

但是，您需要对其进行预填充：

// In controller.
var numFriends = 2;
while ($scope.friends.length < numFriends) {
    $scope.friends.push({});
}