Question

我正在处理一个项目，我输入了用户的ID，名字和姓氏。输入后，我创建一个存储在logins数组中的用户对象。

我要做的是每次单击登录按钮时，将每个新用户显示为无序列表中的下一个项目。现在，我正在尝试从文本框中获取用户输入，这适用于第一项，直到我尝试清除文本框。如何才能正确地将输入绑定到用户对象，同时仍能显示每个新用户？即，添加多个用户并让它们都显示出来。它们似乎被添加到数组中，但我无法弄清楚显示器出错的地方。

我在想，由于我试图将数据输入到文本框的方式，我的变量在我输入时设置，但我不确定我还能尝试什么。棱角分明的新人。任何帮助表示赞赏。

代码：

<!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 1

您无法添加用于转发器的同一对象（重复），你想要这样的一些，

检查下方或查看https://jsbin.com/pulinetari/1/edit?html,console,output

检查

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

你需要在数组上创建要添加的新对象。

<!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>

将用户输入数据绑定到AngularJS对象

1 个答案: