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中的每个朋友更新$scope.friends属性。当我在输入元素中输入他们的名字时，它也会在每个其他朋友身上更新。

如何将此输入的模型设置为$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({});
}

使用ng-repeat中的$ index访问模型数组的索引

1 个答案: