2016-11-06 81 views
0

我正在處理一個項目,我嘗試將用戶對象添加到具有由用戶輸入的屬性的Logins數組中。在AngularJS中獲取/顯示數組中的對象和屬性

一旦添加到Logins數組中,我試圖在一個列表項中顯示User對象(id,firstName,lastName)。每個新用戶都將添加到列表中的下一行。

我想要做的是使對象的每個屬性都可訪問,以便通過搜索user.id來執行諸如驗證多個ID /重複名稱之類的操作。現在我只能從數組中顯示我要推送數據的數據,作爲三個列表項目。

有沒有一種方法來存儲我的用戶輸入,以便我可以在一個列表項中顯示用戶對象本身,而不是(看起來像)三個單獨的數據片段?代碼:

<!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.id, $scope.user.firstName, $scope.user.lastName); 
     console.log($scope.logins); 

    }; 

} 
</script> 
</head> 
<body> 
    <div ng-app ng-controller="LoginController"> 
    <div>Hello {{ user.firstName }}</div> 
    <input ng-model="user.id"></input> 
    <input ng-model="user.firstName"></input> 
    <input ng-model="user.lastName"></input> 

    <input type="submit" ng-click="login()" value="Login"></input> 
    <ul> 
    <li ng-repeat="login in logins">{{ login }}</li> 
    </ul>  
</div> 
</body> 
</html> 

回答

0

你想logins成爲用戶的一個數組(應該因此被命名爲users)。所以更換

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

通過

$scope.logins.push($scope.user); 

我猜你也想將當前編輯的用戶進行一次以前編輯一個已經被添加到陣列中一個新的空用戶,所以加

$scope.user = { 
    id: "", 
    firstName: "", 
    lastName: "" 
}; 
+0

This Works!不知道爲什麼我認爲我需要推動所有這一切。我將如何去顯示字符串格式的數據? –

+0

{{user.id}} - {{user.firstName}} {{user.lastName}}(例如) –