Question

我有一个存储未定义数量的对的表单： label / value ：

<form (submit)=new_answers_for_this_question()>
<div class="row">
    <div class="input-field col m5">
        <input placeholder="Label" id="label" type="text" class="validate">
    </div>
    <div class="input-field col m5">
        <input placeholder="Value" id="values" type="text" class="validate">
    </div>
    <div class="input-field col m2 center-align">
        <button class="btn-floating waves-effect waves-light" (click)="new_answer()"><i class="material-icons">add</i></button>
    </div>
</div>
<button>Insert Answers</button>
</form>

我只想填写两个输入，然后按add button添加一个新行标签/值 input的新行，之前的add button将会消失，并添加一个新按钮以添加新的可能行。使用jQuery很简单append父div上的完整行div但是使用angular我不知道如何处理这个问题，¿任何想法？

编辑：目的是在DataBase中为同一个问题的每对标签和值插入一行。

即：

**Question 1**
Label: 'good', value: '7-10'
Label: 'neutral', Value: '4-6'
Label: 'bad', Value: '1-3'

Answer 1

试试这个

＆＃13;

angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [];
     
      $scope.submit = function() {
        if ($scope.text) {
          $scope.list.push(this.text);
          $scope.text = '';
        }
      };
    }]);

＆＃13;

  

<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
  <pre>{{list}}</pre>
</form>

＆＃13;

Answer 2

在这里你可以编辑和保存

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
import { Component } from '@angular/core';

class ContactInfo {
  constructor(public description: string) {}
}

@Component({
  selector: 'my-app',
  template: `
  <ul>
    <li *ngFor="let info of information">
      <pre>{{ info.description }}</pre>
    </li>
  </ul>
  
  <input #newInfo (keyup.enter)="addInfo(newInfo.value)" (onclick)="addInfo(newInfo.value); newInfo.value='' ">
  
  <button (click)="addInfo(newInfo.value)">Add</button>
  `
})
export class AppComponent {
  information = [];
  
  myInfo = this.information[0];
  
  addInfo(newInfo: string) {
    if (newInfo) {
      this.information.push(new ContactInfo(newInfo));
    }
  }

}

Angular 2附加单击按钮

2 个答案: