在ng-repeat中使用$ index訪問模型數組的索引

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 ）為該特定朋友更新模型。

目前，它似乎正在為$scope.friends 每個朋友更新firstName屬性。 當我在輸入元素中輸入他們的名字時，其他所有好友的名字也會隨之更新。

如何才能將此輸入的模型設置為$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({});
}