如何使用angularjs动态添加行？

问题描述：

我使用代码通过单击添加行来添加行和2列。
我的需求是，
首先填写输入栏中的值
，然后点击添加项目按钮，这些值必须以表格结构显示。
是初学者。不能使用for循环。
任何人都可以解决这个问题。

I used the code to add the row and 2 columns by clicking the add rows. "My need is", First fill the values in the input field, after that click the Add item button, the values must be shown in table structure. Am the beginneer. Cant able to use the for loop. Can anyone please solve this issue.

尝试下面的代码： https://jsfiddle.net/idris9791_/a7L832LL

try the code : 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>

答

您必须将输入的输入值实际推送到 rows array：

You have to actually push the entered input values into the rows array:

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

我会更新html来阅读：

I'd update the html to read:

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

然后：

And then:

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

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

Make sure angular is included properly and your controller is being used the right way too.

如何使用angularjs动态添加行？

相关推荐