如何使用angularjs动态添加行？答案

【问题标题】：How to add the rows dynamically with angularjs?如何使用angularjs动态添加行？
【发布时间】：2016-04-26 15:49:07
【问题描述】：

我使用代码通过单击添加行来添加行和 2 列。 “我的需要是”，首先填写输入字段中的值，之后单击添加项目按钮，值必须显示在表结构中。我是初学者。无法使用 for 循环。谁能解决这个问题。

试试代码：https://jsfiddle.net/idris9791_/a7L832LL/

  <html >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Add Rows</title>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>

  <body ng-controller="MainController" ng-app="MyApp">

    <a href="#" class="button" ng-click="addRow()">Add Row</a>
    <form>
    First Name : <input name="myInput" ng-model="user.firstName" required>
    First Name : <input name="myInput" ng-model="user.lastName" required>
    </form>


<table>
  <thead>
    <tr>
      <th>Some Header</th>
    </tr>
  </thead>
  <tbody>
   <tr ng-repeat="rowContent in rows">
  <td>{{rowContent.firstName}}</td>
  <td>{{rowContent.lastName}}</td>
</tr>
  </tbody>
</table>    
<script>
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {

  $scope.rows = [];

  $scope.counter = 0;

  $scope.addRow = function() {

    $scope.row.push({
    firstName: $scope.firstName,
    lastName: $scope.lastName
});

    $scope.counter++;

  }
}]);
</script>

  </body>
</html>

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

您必须将输入的输入值实际推送到rows 数组中：

$scope.row.push({
    firstName: $scope.firstName,
    lastName: $scope.lastName
});

我会更新 html 以阅读：

<a href="#" class="button" ng-click="addRow()">Add Row</a>
First Name : <input ng-model="firstName" required>
Last Name : <input ng-model="lastName" required>

然后：

<tr ng-repeat="rowContent in rows">
  <td>{{rowContent.firstName}}</td>
  <td>{{rowContent.lastName}}</td>
</tr>

确保正确包含 Angular，并且您的控制器也以正确的方式使用。

【讨论】：

是的，现在我包括了角度。但仍然无法正常工作。我从我身边检查过。
几件事.. 将其更改为：$scope.rows.push({ firstName: $scope.user.firstName, lastName: $scope.user.lastName }); $scope.row.push 行中有错字，您必须将数据与 html 中的模型对齐。
是否可以在对话框中显示输入元素？
我不太确定我是否理解您的问题？
我已经在 jquery 工作了。只需检查我小提琴中的对话框。小提琴链接：jsfiddle.net/idris9791_/97xrvajj