Question

当用户在文本字段中输入的文本通过验证时，我想生成一个新的文本框。现在，当新文本框的文本有效时，应生成另一个文本框。

问题是我无法做到，因为创建的名称是'email1''email2''email3'。而且我无法访问这些动态生成的字段。

JS片段：

var master = {
    name: 'John Smith',
    address: {
        line1: '123 Main St.',
        city: 'Anytown',
        state: 'AA',
        zip: '12345'
    },
    contacts: [{
        type: 'phone',
        value: 'This is a value',
        validationtype: 'number'
    }]
};

$scope.addContact = function(contact) {
    var valueOfContact = $scope.form.contacts.value;
    console.log(valueOfContact);
    if ($scope.myForm.email.$valid == true) {
        tbCounter++;
        $scope.form.contacts.push({
            type: 'email',
            value: '',
            name: 'email' + tbCounter,
            id: 'email' + tbCounter
        });
        console.log($scope.form.contacts.indexOf(contact), $scope.form.contacts.length);
    }
};

在If子句中，我希望能够访问email1，email2等等。

HTML代码段：

<div ng-repeat="contact in form.contacts">
  <label>{{ contact.type }}</label>
  <input name ="{{ contact.name }}" type="{{ contact.type }}" ng-model="contact.value" ng-change=addContact(contact) required/>
  <span class="error" ng-show="myForm.email.$error.required">required</span>
  <span class="error" ng-show="myForm.email.$error.email">invalid email</span>
</div>

感谢。

Answer 1

尝试在$index：

中ng-repeat访问其中的每个元素

<div ng-repeat="contact in form.contacts">

      <label>{{ form.contacts[$index].type }}</label>
      <input name="form.contacts[$index].name" type="form.contacts[$index].type" ng-model="form.contacts[$index].value" ng-change="addContact(contact)" required />

</div>

看看this插件，你会明白的。

如何在angularjs中访问动态创建的字段？

1 个答案: