Benutzereingabedaten an AngularJS-Objekt binden

Ich arbeite an einem Projekt, bei dem ich die ID, den Vornamen und den Nachnamen eines Benutzers eingegeben habe. Nach der Eingabe erstelle ich ein Benutzerobjekt, das im Logins-Array gespeichert wird.Benutzereingabedaten an AngularJS-Objekt binden

Was ich versuche zu tun ist jeden neuen Benutzer als das nächste Element in einer ungeordneten Liste angezeigt jedes Mal, wenn die Login-Schaltfläche geklickt wird. Im Moment versuche ich, die Benutzereingabe von den Textfeldern zu erhalten, dies funktioniert für das erste Element, bis ich versuche, die Textfelder zu löschen. Wie kann ich meine Eingabe korrekt an das Benutzerobjekt binden und trotzdem jeden neuen Benutzer anzeigen? Das heißt, fügen Sie mehr als einen Benutzer hinzu und lassen Sie beide erscheinen. Sie scheinen zum Array hinzugefügt zu werden, aber ich kann nicht herausfinden, wo die Anzeige falsch läuft.

Ich denke, dass wegen der Art, wie ich versuche, die Dateneingabe in die Textfelder zu bekommen, meine Variablen gesetzt werden, wie ich sie eingeben, aber ich bin mir nicht sicher, was ich noch versuchen kann. Ganz neu zu kantig. Jede Hilfe wird geschätzt.

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>

Quelle

2016-11-07 Jeremy Stone

Was ist der Fehler aufgetreten und die Version von Winkel bekommen? – alphapilgrim

Ich habe gerade bemerkt, dass ich immer noch 1.2.13 von einer alten Datei verwende, von der ich dachte, dass ich sie modifizieren könnte. Ich hätte die neueste Version verwenden sollen. Jetzt bin ich mehr verloren als ich dachte. –

keine Sorgen, wir können diese Arbeit machen. Was ist der Fehler? – alphapilgrim

Sie können nicht hinzufügen gleiche Objekt (duplicate), die Sie für Repeater verwendet haben, du so etwas wollen,

Scheck unten oder überprüfen https://jsbin.com/pulinetari/1/edit?html,console,output

Scheck

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

müssen Sie neu erstellen Objekt zu Array hinzufügen, das von Repeater verwendet wird.

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

Quelle

2016-11-07 21:15:10

Benutzereingabedaten an AngularJS-Objekt binden

Antwort

Verwandte Themen