Question

我正在开发一个AngularJs应用程序，在我的控制器中有一个像这样的数组的视图

$scope.emails = [{email:peter@w34.co},
{email:john@w34.co},
{email:doe@w34.co}
]

我正在处理此电子邮件的编辑表单，因此我的观点看起来像

<div ng-repeat='email in emails'>

  <input type='email' ng-model='email.email'>
</div>

最后我有一个按钮，在点击时添加另一个字段以添加新电子邮件，该功能看起来像

$scope.emails.push({email:''});

现在我的数组看起来像

[{email:'peter@w34.co'},
{email:'john@w34.co'},
{email:'doe@w34.co'},
{email:''}
]

问题是当新输入出现时，当我在其中键入任何内容时，$ scope.emails剂量不会更新，最有线的事情是最后一个对象变成空对象，所以我的数组现在看起来像

[{email:peter@w34.co},
{email:john@w34.co},
{email:doe@w34.co},
{}
]

任何帮助将不胜感激，提前谢谢！

Answer 1

我认为问题是因为输入类型的电子邮件。 angular仅绑定有效的输入值。因此，在插入有效的电子邮件之前，您的对象应为空。只有在完成输入后，绑定才有效。请参阅代码段：

'use strict'

var $scope = {};

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', ['$scope', function($scope){

  $scope.appName = "Name of the application";
  
  $scope.emails = [
    {email:'peter@w34.co'},
    {email:'john@w34.co'},
    {email:'doe@w34.co'}
  ];
  
  $scope.addMail = function(){
    $scope.emails.push({email:''});
  };
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  {{appName}}

  <hr>
  
  <div ng-repeat='email in emails'>
    <input type='email' ng-model='email.email'>
  </div>
  
  <hr>
  
  <button type="button" ng-click="addMail()">Add new mail</button>
  
  <hr>
  
  {{emails}}
  
</div>

在ng-repeat中绑定动态创建的输入

1 个答案: