角2追加點擊按鈕

Question

我有一個存儲對一個未定義的數字形式：標籤/值：

<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，但使用角度我不知道如何處理這個問題，¿任何想法？

編輯：其目的是爲DataBase中相同問題的每對標籤和值插入一行。

即：

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

Answer 1

試試這個

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

 

 
<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>

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)); 
 
    } 
 
    } 
 

 
}