Jeremy Stone Jeremy Stone - 1 month ago 16
AngularJS Question

Binding user input data to AngularJS object

Im working on a project where I input a user's Id, first name and last name. Once input, I create a user object which is stored inside the logins array.

What I'm trying to do is display each new user as the next item in an unordered list each time the login button is clicked. Right now, I'm trying to get the user input from the text boxes, this works for the first item, until I try to clear the text boxes. How can I correctly bind my input to the user object while still being able to display each new user? I.e, add more than one user and have them both show up. They seem to be added to the array fine, but I can't figure out where the display is going wrong.

I'm thinking that because of the way I'm trying to get the data input to the text boxes, my variables are set as I enter them, but I'm not sure what else I can try. Quite new to angular. Any help is 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>

Answer

you cannot add same object (duplicate) that you have used for repeater, you want some like this,

check below or check on https://jsbin.com/pulinetari/1/edit?html,console,output

check

$scope.logins.push({id:$scope.user.id, firstName: $scope.user.firstName, lastName: $scope.user.lastName});

you need to create new object to add on array, which uses by repeater.

<!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({id:$scope.user.id, firstName: $scope.user.firstName, lastName: $scope.user.lastName});
        console.log($scope.logins);
    };
	$scope.selectUser= function(user){
		$scope.user = user;
	}
}
</script>
</head>
<body>
  <div ng-app 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" ng-click="selectUser(login)">{{login.id + ', ' + login.firstName + ', ' + login.lastName}}</li>
    </ul>    

</div>
</body>
</html>