在我的模块中,我有一个调用$http
的服务并获取一个对象数组
function MenuSearchService($http){
this.getMatchedMenuItems=function(searchItem){
var foundItems =$http({
method:'GET',
url:'https://whateverurl.com/whateverdata'
});
return foundItems;
}; // end function
}; // end service
我使用控制器(作为语法)来处理数据,
function MenuController(MenuSearchService){
this.query;
this.results;
this.promise;
this.searchClicked=false;
this.clickToSearch = function(searchItem){
this.searchClicked=true;
this.query=searchItem;
this.promise=MenuSearchService.getMatchedMenuItems()
.then(function(result){
this.foundItems = result.data;
console.log(this.foundItems);
});
}; // end onclick
}; // end controller
我能够检索数据。这是foundItems
的标准输出:
foundItems
中的每个对象都有属性name
和description
。但是当我想在视图中显示它时,
<section class="container" ng-controller="MenuController as m">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in m.foundItems">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
</tr>
</tbody>
</table>
</section>
数据未显示。任何人都可以说出了什么问题吗?
更新 在看了@ charlietfl的评论之后,我将我的代码更新为:
function MenuController(MenuSearchService){
var m=this;
m.query;
m.promise;
m.searchClicked=false;
m.clickToSearch = function(searchItem){
m.searchClicked=true;
m.query=searchItem;
m.promise=MenuSearchService.getMatchedMenuItems()
.then(function(result){
m.foundItems = result.data;
console.log(m.foundItems);
}).catch(function (error) {
console.log(error.message());
});
}; // end onclick
}; // end controller
这个概念错误地在控制器内的函数中使用this.
。