I am currently facing an issue where the ng-repeat Directive in my code is getting commented out and not displaying the results of the JSON object. I have verified that the object is being properly passed to "this.paises2" using the toSource() method, and everything seems to be fine.
I have checked various resources but haven't found a solution yet:
AngularJS: ng-repeat not displaying JSON
ng-repeat code getting commented out when viewed from browser
ngRepeat div get commented out when i see from the browser inspector
Here is the snippet of HTML code causing the issue:
<html ng-app="miModulo">
<head>
<link href="mis-css.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="miControlador as vm">
<button ng-click="vm.buscarEnRegion()">Pulsar</button>
<ul ng-repeat="elemento in vm.paises">
<li>
{{elemento.name}}
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="mijs1.js"></script>
</body>
And here is the corresponding Javascript/AngularJS code:
angular
.module("miModulo",[])
.controller("miControlador",['$http',funcionPrincipal] );
function funcionPrincipal($http) {
this.buscarEnRegion=function(){
$http.get("https://restcountries.eu/rest/v1/region/africa").then(function(miRespuesta){
this.paises=miRespuesta;
alert(this.paises.toSource());
},function(miRespuesta){
alert("incorrecto");
});
}
}
Any help or suggestions would be greatly appreciated. Thank you!