如何使用angularjs动态添加行?

编程入门 行业动态 更新时间:2024-10-28 05:26:02
本文介绍了如何使用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.

尝试下面的代码: jsfiddle/idris9791_/a7L832LL

try the code : jsfiddle/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="ajax.googleapis/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动态添加行?

本文发布于:2023-11-05 07:13:20,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:如何使用   动态   angularjs

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!