En el código del index.html, la propiedad del controlador que va a recibir los datos, y a partir de la cual se van a generar las repeticiones con la directiva ng-repeat
se llama posts
:
<ul ng-repeat="post in posts">
<!-- Contenido -->
</ul>
Pero en el codigo JS de tu controlador, esa propiedad que recibe los datos se llama post
.
$http.get("https://jsonplaceholder.typicode.com/posts").then(function (response) {
$scope.post = response.data; // Propiedad post
}
¿Solución? Simple: Cambia el nombre de la propiedad de tu controlador de $scope.post
a $scope.posts
.
myApp.controller("postController", ["$scope", "$http", function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/posts").then(function (response) {
$scope.posts = response.data;
}
)}]);
Adicional a ello: La API que estás consumiendo devuelve registros con propiedad userId
, no userID
. Si quieres que se muestre esa información, en el primer elemento <li>
anidado en el elemento <ul>
, tienes que cambiar el {{post.userID}}
por {{post.userId}}
.
Lo puedes ver en acción en el siguiente snippet.
/* Modelo */
let myApp = angular.module('myApp', []);
myApp.controller("postController", ["$scope", "$http", function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/posts").then(function (response) {
$scope.posts=response.data;
}
)}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="postController">
<ul ng-repeat="post in posts">
<li>{{post.userId}}</li>
<li>{{post.title}}</li>
</ul>
</div>
</div>