Когда я отправляю форму, данные в полях ввода должны отображаться в таблице. Для меня данные поступают в таблицу, но строки не добавляются, а данные таблицы обновляются только в строке. Когда я отправляю форму несколько раз, данные обновляются только в строке. Как можно добавлять строки динамически. У меня есть два поля, такие как категория номера и номер аниме
var app = angular.module("myApp", []);
app.controller("roomCategoryController", ["$scope", function($scope){
$scope.submit = function(){
$scope.formdata = [];
var myObj = {};
myObj.category = $scope.category;
myObj.amenities = $scope.amenities;
console.log("my data");
$scope.formdata.push(myObj);
$scope.category ='' ;
$scope.amenities = '';
console.log($scope.formdata);
}
}])
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css">
</head>
<body>
<main ng-app = "myApp">
<div class="container-fluid" ng-controller = "roomCategoryController">
<div class="container mt-4">
<h3>Room Category</h3>
<div class="col-12 d-flex">
<div class="col-4">
<p>Room Category</p>
</div>
<div class="col-8">
<div class="input-group mb-3">
<input type="text" class="form-control" ng-model = "category">
</div>
</div>
</div>
<div class="col-12 d-flex">
<div class="col-4">
<p>Room Amenities</p>
</div>
<div class="col-8">
<form>
<div class="form-group">
<select class="form-control" id="basic" ng-model = "amenities">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</form>
</div>
</div>
<div class='col-12'>
<div class='col-md-4'>
<button type="submit" class="btn btn-primary" ng-click="submit()">Submit</button>
</div>
</div>
<div class="col-12">
<table class="table mt-5 table-striped table-dark">
<thead>
<tr>
<th>S.No</th>
<th>Room Category</th>
<th>Room Amenities</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in formdata">
<td>{{$index+1}}</td>
<td>{{x.category}}</td>
<td>{{x.amenities}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="roomCategoryController.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script>
</body>
</html>