It aims that I can input some data and will update in {{urname}} and {{urcm}} inside the table. However, the expression is not work.
Also, I cannot open up new row in the table when I submit new comments. All the data packed together.
var myApp = angular.module('myApp', []);
myApp.controller('TableFilterCtrl', ['$scope', function($scope) {
$scope.urname = [];
$scope.urcm = [];
$scope.uname = '';
$scope.ucm = '';
$scope.submit = function() {
if (!!$scope.uname, !!$scope.ucm) {
$scope.urname.push($scope.uname);
$scope.urcm.push($scope.ucm);
}
$scope.uname = '';
$scope.ucm = '';
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="js/control.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/hp.css">
</head>
<body>
<form ng-submit="submit()" ng-controller="TableFilterCtrl">
<label>Name: </label>
<input type="text" ng-model="uname" name="uname" placeholder="Enter your name." />
<label>Comments on mv: </label>
<input type="text" ng-model="ucm" name="ucm">
<input type="submit" id="submit" value="submit" />
<div>
<table>
<tr>
<td>Name</td>
<td>Comments</td>
</tr>
<tr>
<td>{{urname}}</td>
<td>{{urcm}}</td>
</tr>
</table>
</div>
</form>
</body>
Just changing the logic a little bit and using ng-repeat, I suggest something like this: