如何使用angularjs动态添加行？
Posted
技术标签:
【中文标题】如何使用angularjs动态添加行？【英文标题】：How to add the rows dynamically with 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>
【问题讨论】：
【参考方案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以上是关于如何使用angularjs动态添加行？的主要内容，如果未能解决你的问题，请参考以下文章