Question

如何动态创建表，然后向表中添加行？我已经能够创建一个带有表单字段的行的表，但是我如何添加其他行？关于它如何实施的任何例子都会有所帮助。我做了角2。 screenshot

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

有角度或jquery的任何帮助。

Answer 1

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>

快乐编码，希望它会帮助你

动态创建表格和行

1 个答案: