AngularJSオブジェクトへのユーザー入力データのバインド

私はユーザーのID、名、姓を入力するプロジェクトに取り組んでいます。入力が終わると、私はログインオブジェクトの配列の中に保存されているユーザーオブジェクトを作成します。AngularJSオブジェクトへのユーザー入力データのバインド

私がしようとしているのは、ログインボタンがクリックされるたびに、新しいユーザーを順序なしリストの次の項目として表示することです。今、テキストボックスからユーザー入力を取得しようとしていますが、これはテキストボックスをクリアしようとするまで、最初の項目で機能します。どのようにして、新しいユーザーをまだ表示できるうちに、入力をユーザーオブジェクトに正しくバインドできますか？つまり、複数のユーザーを追加し、それらの両方が表示されるようにします。それらは配列の細かさに追加されているようですが、ディスプレイがどこに間違っているのか分かりません。

私はテキストボックスにデータを入力しようとしているため、変数を入力するときに変数が設定されていると思いますが、他に何ができるのか分かりません。まったく新しい角度。どんな助けもありがとうございます。

コード：

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

出典

2016-11-07 Jeremy Stone

エラーがあなたを取得し、角度のバージョンをいただきましたか？ – alphapilgrim

私はまだ私が変更できると思った古いファイルから1.2.13を使用していることに気付きました。私は最新のバージョンを使用していたはずです。今私は私が思ったよりも失われています。 –

心配しなくても、私たちはこの作業をすることができます。エラーは何ですか？ – alphapilgrim

あなたは、あなたがこのようないくつかをしたい、あなたはリピーターのために使用されていること（複製）以下

チェックを同じオブジェクトを追加したり、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); 
 
    }; 
 
\t $scope.selectUser= function(user){ 
 
\t \t $scope.user = user; 
 
\t } 
 
} 
 
</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>

出典

2016-11-07 21:15:10

AngularJSオブジェクトへのユーザー入力データのバインド

答えて

関連する問題