Currently, I am working on a project that involves inputting a user's ID, first name, and last name. Once the input is received, a user object is created and stored inside the logins array.
My goal is to display each new user as the next item in an unordered list every time the login button is clicked. However, I am encountering issues when trying to clear the text boxes after the first entry. How can I accurately bind my input to the user object while ensuring that each new user is displayed? Essentially, I want to add multiple users and have them all appear in the list. While they are being added to the array correctly, the display seems to be where the problem lies.
I suspect that my approach to capturing the data input from the text boxes may be causing the variables to be set only upon entry. As someone who is relatively new to Angular, any assistance would be greatly appreciated.
Code:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script type='text/javascript'>
function LoginController($scope) {
$scope.user = {
id: "",
firstName: "",
lastName: ""
};
$scope.logins = [];
$scope.login = function () {
$scope.logins.push($scope.user);
console.log($scope.logins);
};
}
</script>
</head>
<body>
<div ng-controller="LoginController">
<div>Hello {{ user.firstName }}</div>
<input id="id" ng-model="user.id"></input>
<input id="first" ng-model="user.firstName"></input>
<input id="last" ng-model="user.lastName"></input>
<input type="submit" ng-click="login()" value="Login"></input>
<ul>
<li ng-repeat="login in logins" >{{user.id + ', ' + user.firstName + ', ' + user.lastName}}</li>
</ul>
</div>
</body>
</html>