Angularjs.在 http.get 之后显示对象属性
angularjs. Display object property after http.get
我是Angular.js
新手,我用codeschool.com
Shaping up with angularjs
了教程,所以如果我试图解决的问题可能太容易解决,请原谅我。
因此,我只是尝试显示我从$http.get()
获得的数据,该数据是JSON
对象到我的文档中。
索引.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>League of legends</title>
<!-- Load StyleSheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Load Javascript Libraries -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="LeagueOfLegends">
<!-- Navbar menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-controller="searchSummoner as summoner">
<!-- Search Form -->
<div ng-show="summoner.status.showSearch">
<form ng-submit="summoner.search()">
<div class="well">
<div class="form-group">
<label for="summonerName">Summoner Name</label>
<input type="text" class="form-control" placeholder="Enter Summoner Name" id="summonerName" ng-model="summoner.form.name">
</div>
<div class="form-group">
<label ng-repeat="region in summoner.region">
<input type="radio" ng-model="summoner.form.region" ng-value="region">{{region}}
</label>
</div>
<input type="submit" class="btn btn-default" value="Search"></input>
</div>
</form>
</div>
<p ng-show="summoner.status.showResult">Get request from: {{summoner.data.name}}</p>
</div>
</div>
</body>
应用程序.js(模块控制器(:
var app = angular.module('LeagueOfLegends', []);
app.controller('searchSummoner', ['$http', function($http)
{
var form = {};
this.data = {};
this.form = {};
this.status = {
showSearch: true,
showResult: false
};
this.region = ['br', 'eune', 'euw', 'lan', 'las', 'na', 'oce', 'kr', 'tr'];
this.search = function()
{
form = this.form;
this.form = {};
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
});
// hide form
this.status.showSearch = false;
this.status.showResult = true;
};
}]);
function getApiUrl(form)
{
var apiKey = 'fe9eb24f-5800-4f2a-b570-15328062b341';
return 'https://lan.api.pvp.net/api/lol/' + form.region + '/v1.4/summoner/by-name/' + form.name + '?api_key=fe9eb24f-5800-4f2a-b570-15328062b341'
}
成功制作$http.get
后,我制作了一个日志,只是为了检查我检索的数据是否是我需要的数据,但它没有在 HTML 中显示对象属性
你在错误的闭包中使用了this
。这是你应该做的:
var that = this;//give controller scope access
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
that.data = data[form.name];
console.log(that.data);
});
您也可以像这样绑定上下文:
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
}.bind(this));
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
相关文章:
- 在javascript中添加和显示对象的随机数组中的视频
- 如何使用for in循环在javascript中显示对象中的对象
- 如何移动PIXI显示对象
- 在鼠标悬停时显示对象的边框(Fabricjs)
- 使用jquery在不同的表中显示对象的元素
- 剑道角's自动完成在结果中显示对象
- ExtJS显示对象属性
- 在 angularjs 的数组中显示 x 对象
- JQuery UI 自动完成在滚动菜单时在文本框中显示 [对象对象]
- JSON对象在控制台中显示对象,但也包含来自php脚本返回的字符串的“未定义”
- 如果属性不存在,则不显示对象的数据
- 挖空 JS为每个绑定显示 [对象对象]
- 翡翠 - 显示对象属性 - 未定义
- 单击超链接后在同一页面中显示对象
- 渲染场景时不显示对象
- 它在文本区域中显示“[对象][对象]”
- Angularjs.在 http.get 之后显示对象属性
- 如何在嵌套级别不受限制的情况下显示对象的动态嵌套子数组对象
- 如何在IE9上显示对象的内容
- JavaScript 警报函数不会显示对象