导入Json数据并在angular应用中显示 [英] Import Json data and show it in angular app
问题描述
我一周前开始学习角度知识，现在我正尝试自己创建一个应用程序(因为人们说这是最好的学习方式)，我正尝试做我以前没有做过的事情，所以不要这么粗鲁如果我很容易，我会尝试构建一个pokedex，我尝试使用Json中已经存在的数据，并将其导入angular上的控制器，以便我可以使用ng-repeat来显示数据，但是我不知道为什么它没有结果，也许我在做很多错误，但是我找不到它:/，我会在这里发布我所做的事情:
i started learning angular a week ago, and now im trying to construct a app by myself (because people say that is the best way to learn), im trying to do a thing that i didnt before so dont be so rude to me if it is easy, im trying to build a pokedex, im trying to use data that already exist for it in Json, and import it to the controller on angular so i can use ng-repeat to show the data, but i dont know why it doesnt result, maybe im doing a lot of mistakes but i cant find it :/ , i will post what i did here:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="angular.js"></script>
<script src="pokedex.js"></script>
<body ng-app ="pokedex">
<div class="row">
<div class="col-md-offset-1 form-group">
<label for="sel1">Select list:</label>
<select class="form-control">
<option>All</option>
<option>Normal</option>
<option>Watter</option>
<option>Fire</option>
<option>Eletric</option>
<option>Rock</option>
<option>Ice</option>
<option>Grass</option>
<option>Psychic</option>
<option>Poison</option>
<option>Dragon</option>
</select>
</div>
</div>
<div class="row" ng-controller="PokemonController as pokedex">
<div class="col-md-offset-1 col-md-6" ng-repeat = "pokemon in pokedex.pokemons">
<p>Name: {{pokemon.Name}}</p>
</div>
</div>
脚本
(function(){
var app = angular.module('pokedex',[]);
app.controller('pokemonController',['$http',function($http){
var pokemons = this;
$http.get('https://pokedex-deluxor.rhcloud.com/getall').success(function(data){
pokemons = data;
});
}]);
});
Json Url: Pokedex
Json Url: Pokedex
Ps:对不起我的英语朋友不好:/
Ps: Sorry about my bad english friends :/
推荐答案
，您应该将http请求返回的数据分配给作用域对象神奇宝贝.因为您将controller用作语法，所以应该这样做
you should assign the data returned from your http request to the scope object pokemons. since you used controller as syntax you should do
JS
(function(){
var app = angular.module('pokedex',[]);
app.controller('pokemonController',['$http',function($http){
$http.get('https://pokedex-deluxor.rhcloud.com/getall').success(function(data){
this.pokemons = data;
});
}]);
});
HTML
<div class="row" ng-controller="PokemonController as pokedex">
<div class="col-md-offset-1 col-md-6" ng-repeat = "pokemon in pokedex.pokemons">
<p>Name: {{pokemon.Name}}</p>
</div>
这篇关于导入Json数据并在angular应用中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
