2016-01-20 2 views
0

Я использовал код, чтобы добавить строку и 2 столбца, нажав на добавить строки. «Моя потребность», Сначала заполните значения в поле ввода после этого нажмите кнопку «Добавить элемент», значения должны быть указаны в структуре таблицы. Я начинаю. Невозможно использовать цикл for. Может кто-нибудь решить эту проблему.Как добавить строки динамически с помощью angularjs?

попробовать код: 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> 

ответ

4

Вы должны фактически нажать введенные значения входных в 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> 

Убедитесь, что угловой включен правильно, и ваш контроллер также используется правильно.

+0

Да, теперь я включил угловой. Но все еще не работает. Я проверил со своей стороны. – Idris

+0

@Idris Вы можете добавить более подробную информацию о своем коде выше? – Chewpers

+0

да, я обновил код – Idris

Смежные вопросы