동적으로 테이블과 행을 만듭니다.

테이블을 동적으로 만들고 테이블에 행을 추가하려면 어떻게해야합니까? 양식 필드가있는 행 하나를 사용하여 테이블을 만들 수 있었지만 어떻게 추가 행을 추가 할 수 있습니까? 구현 방법에 대한 예제가 도움이 될 것입니다. 나는동적으로 테이블과 행을 만듭니다.

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

각도 또는 JQuery와에 어떤 도움을 2. 각 screenshot로했다.

출처

2017-04-07 jones D

가 어떻게 하나 개의 행을 위해 그것을 않았다 그것은 당신에게 도움이 될 것입니다 희망? 다시 똑같이 할 수 없습니까? –

$ scope [ 'questionelemnt']. 푸시. http://jsfiddle.net/JDS2U/22/에서 배웠습니다. 그것을 테이블로 대체했습니다. 테이블과 행을 동적으로 추가 및 제거 할 수있는 jsfiddle이 있습니까? –

테이블을 동적으로 만들거나 행 또는 둘 다를 만들려면 정확히 무엇이 문제인지 지정하십시오. – 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>

해피 코딩,

출처

2017-04-07 11:32:58 ketanmodi

[코드 전용 답변을 게시하는 것이 현명한 이유] (https://meta.stackexchange.com/a/148274/341145)를 읽어보십시오. –

동적으로 테이블과 행을 만듭니다.

답변

관련 문제