Tabelle und Zeilen dynamisch erstellen

Wie kann ich eine Tabelle dynamisch erstellen und dann Zeilen zur Tabelle hinzufügen? Ich konnte die Tabelle mit einer Zeile mit Formularfeldern erstellen, aber wie kann ich zusätzliche Zeilen hinzufügen? Jedes Beispiel, wie es implementiert wurde, wäre hilfreich. Ich habe in Winkel 2. screenshot Tabelle und Zeilen dynamisch erstellen

$scope.newItem = function($event, valI) { 
    $scope['questionelemnt'].push({ 
    id: counter, 
    title: '', 
    desc: '', 
    Qty: '', 
    price: '', 
    total: '' 
    }); 
}

Jede Hilfe in Winkel- oder jquery.

Quelle

2017-04-07 jones D

Wie haben Sie es für eine Zeile zu tun? Kannst du nicht nochmal dasselbe machen? –

Nach $ scope ['questionelemnt']. Gelernt von http://jsfiddle.net/JDS2U/22/. Ersetzt es als Tabelle. Gibt es eine jsfiddle, wo Tabelle und Zeilen dynamisch hinzugefügt und entfernt werden können –

Bitte geben Sie an, was genau das Problem ist, wenn Sie Tabellen dynamisch erstellen möchten, oder Zeilen oder beides? – xelilof

Directive ng-app & ng-controller code 
HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html ng-app="helloApp"> 
    <head> 
    <title>Hello AngularJS - Add Table Row Dynamically</title> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> 
<script src="assets/js/controllers.js"></script> 
</head> 
<!-- Controller name goes here --> 
<body ng-controller="CompanyCtrl"> 
... 
</body> 
</html> 

Controller CompanyCtrl code in controller.js    
<script> 
var helloApp = angular.module("helloApp", []); 
helloApp.controller("CompanyCtrl", function($scope) { 
$scope.questions = []; 
$scope.addRow = function(){  
    $scope.questions.push({ 'title':$scope.title, 'desc': $scope.desc, 'Qty':$scope.Qty,'price':$scope.price,'total':$scope.total }); 
    $scope.title=''; 
    $scope.desc=''; 
    $scope.Qty=''; 
    $scope.price=''; 
    $scope.total=''; 
}; 
)}; 
</script> 
Directive ng-repeat code 
<table class="table"> 
<tr> 
    <th>title 
    </th> 
    <th>desc 
    </th> 
    <th> Qty 
    </th> 
    <th>price 
    </th> 
    <th>total 
    </th> 
</tr> 
<tr ng-repeat="question in questions"> 
    <td>{ {question.title}} 
    </td> 
    <td>{ {question.desc}} 
    </td> 
    <td>{ {question.Qty}} 
    </td> 
    <td>{ {question.price}} 
    </td> 
    <td>{ {question.total}} 
    </td> 
</tr> 
</table> 

**Directive ng-submit code** 

<form class="form-horizontal" role="form" ng-submit="addRow()"> 
<div class="form-group"> 
    <label class="col-md-2 control-label">title</label> 
    <div class="col-md-4"> 
     <input type="text" class="form-control" name="title" 
      ng-model="title" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-2 control-label">desc</label> 
    <div class="col-md-4"> 
     <input type="text" class="form-control" name="desc" 
      ng-model="desc" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-2 control-label">Qty</label> 
    <div class="col-md-4"> 
     <input type="text" class="form-control" name="Qty" 
      ng-model="Qty" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-2 control-label">price</label> 
    <div class="col-md-4"> 
     <input type="text" class="form-control" name="price" 
      ng-model="price" /> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-md-2 control-label">total</label> 
    <div class="col-md-4"> 
     <input type="text" class="form-control" name="total" 
      ng-model="total" /> 
    </div> 
</div> 
<div class="form-group">         
    <div style="padding-left:110px"> 
     <input type="submit" value="Submit" class="btn btn-primary"/> 
    </div> 
</div>

Glücklich Coding, hoffen, dass es Ihnen helfen,

Quelle

2017-04-07 11:32:58 ketanmodi

Bitte lesen Sie warum [es ist nicht klug, Nur-Code-Antworten zu posten] (https://meta.stackexchange.com/a/148274/341145) –

Tabelle und Zeilen dynamisch erstellen

Antwort

Verwandte Themen