Question

这是我在角度模板中的HTML代码。在我的控制器中我有

$scope.contacts.

$ scope.contacts中的每个联系人都可以有多个contact.fields。你可以看到我在这里有2 ng-repeat，每个联系人和每个contact.field。用户可以手动添加联系人，并为每个联系人定义它有多少个字段。因此，用户单击加号并添加与空字段的联系。我的问题是：如何使用$ scope.contacts绑定视图，因此当用户添加新联系人时，它会显示在$ scope.contacts中？

<div id="contactsContainer">
<div id="{{contact.divId}}" ng-style="{'border': contact.borderStyle}"
 class="form-group {{contact.divId}}" ng-mouseover="hoverIn()"
  ng-mouseleave="hoverOut()" ng-repeat="contact in contacts track by $index">
<label class="col-sm-3 control-label">{{ translate[contact.keyTranslationName]}}</label>
<div id="fieldContainer" class="col-sm-4">
  <div id="currentField" class="row mb5"
     ng-repeat="field in contact.field track by $index">
     <div id="{{contact.idPersonContact}}"
        class="{{field.width}} has-icon pull-left">
        <input name="{{field.name}}"
           id="{{field.id}}"
           placeholder="{{ translate[field.keyTranslationPlaceholder] }}"
           class="form-control" value="{{field.value}}"
           style="background-image: url();background-position: left;background-repeat: no-repeat;background-size:20px;">
     </div>
  </div>
</div>
</div>

Answer 1

<input type="button" ng-click="addContact()" />

//控制器

  $scope.addContact = function(){
       $scope.contacts.push({field : []}); 
       // or field : Array(defaultFieldSize) 
       $scope.contacts.push({field : new Array(5) }); // Contact with 5 empty fields 
    }

Answer 2

在联系人集合中添加联系人即可。因此，当用户使用按钮创建新联系人时，您可以执行以下操作：

var newContact = {
   field1:'',
   field2: '' 
   ...
}

然后只需将新联系人添加到contacts集合中。

$scope.contacts.push(newContact);

ng-repeat将检测集合中的变化并进行渲染。

当用户可以添加输入字段时如何关联视图和控制器？

2 个答案: