Question

我正在创建一个网页，我可以为用户提供动态添加订单项的选项。我使用了angularjs框架（v 1.4.7）。我能够实现动态添加项目到ng-repeat的效果，但模态在动态添加的项目中似乎不是唯一的。

以下是显示问题的演示代码：

<div>
<form novalidate class="form-vertical" ng-show="!loading" name="detailsForm" ng-controller="DetailsCtrl">

  <div ng-repeat="social in socials track by $index">
      <ng-form name="urlForm">
            <input type="email" name="socialUrl" ng-model="social.email">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.email">Email error</span>
      </ng-form>
  </div>  
  <a title="Add" class="btn btn-success" href="javascript:void(null)" ng-click="addSocial()"><i class="fa fa-plus fa-lg"></i> Add</a>
</form>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('DetailsCtrl', ['$scope', function($scope) {
    $scope.loading = false;
    var social = {"email":""};

    $scope.socials = [
            { email: 'test@test.com'},
        { email: 'invalid email'}];


  $scope.addSocial = function(){
    $scope.socials.push(social);
  };

    }]
    );

我创建了显示问题的fiddle。在小提琴中，请添加一个新项目＆＃34; 12345@email.com"。添加另一项＆＃34; 54321@email.com"。您会注意到，在第二个输入时，最初添加的项目也会更改。

Fiddle

Answer 1

这是因为您将相同的对象添加到数组中，然后您不会将社交分配给新对象。这样，角度就可以保持它的绑定。

Here's your fix：

$scope.addSocial = function(){
    $scope.socials.push(social);
    social = {"email": ""};
  };

动态添加项目到ng-repeat保持重复模型

1 个答案: