current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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>
share|improve this question
    
Whats the error your getting and the version of angular? – alphapilgrim 20 hours ago
    
I just noticed I'm still using 1.2.13 from an old file that I thought I could modify. I should have been using the most recent version. Now I'm more lost than I thought I was. – Jeremy Stone 19 hours ago
    
no worries, we can make this work. whats the error? – alphapilgrim 19 hours ago
    
The code I have posted works fine but if you clear the text boxes the list display breaks. With the version updated nothing is working at all apparently – Jeremy Stone 19 hours ago
    
please include the code you have to clear the text boxes. – alphapilgrim 19 hours ago
up vote 0 down vote accepted

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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.