テーブルを動的に作成してテーブルに追加するにはどうすればよいですか？私は、フォームフィールドを持つ1つの行を持つテーブルを作成することができましたが、どのように追加の行を追加することができますか？どのように実装されているかの例が役に立ちます。私は、角2 screenshotテーブルと行を動的に作成する
$scope.newItem = function($event, valI) {
$scope['questionelemnt'].push({
id: counter,
title: '',
desc: '',
Qty: '',
price: '',
total: ''
});
}
に角度やjqueryの内の任意の助けをしました。
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>
ハッピーコーディング、
[コードのみの回答を投稿することは賢明ではありません]（https://meta.stackexchange.com/a/148274/341145）の理由をお読みください。 –
がどのように1行のためにそれをやった、それはあなたに役立つことを願っていますか？同じことをやり直すことはできませんか？ –
$ scope ['questionelemnt']による。 http://jsfiddle.net/JDS2U/22/から学んだ。テーブルに置き換えました。テーブルと行を動的に追加および削除できるjsfiddleがありますか？ –
テーブルを動的に作成する場合、または行またはその両方を作成する場合は、正確に何かを指定してください。 – xelilof