无法将 ng-repeat 与来自 ajax 的 JSON 调用一起使用
Cannot use ng-repeat with a JSON from ajax call
我在使用 json 来自 ajax 调用和 ng-repeat 时遇到了很多麻烦。
我已经 post 在此处编辑了我的代码 http://jsfiddle.net/7quj9omw/ 这样您就可以以更有条理的方式查看,虽然我知道它还不完整,运行 这将变得非常庞大错误,它包含 ajax 调用的本地 url。
问题是,我的 JSON 对象检索正常,我可以在我的 EventsController 中 console.log(EventsService.Todos()) 正常,它会注销 JSON对象,但是当传递给标记中的 ng-repeat 时,它将不起作用。
如果我将 JSON 和 post 直接复制到我的代码中,它可以正常工作。
我深深地认为这是一个解析问题,但我已经尝试在我的变量中使用 PARSE.json 但也不起作用。
我是不是在将我的数据从我的服务一直传递到我的 html 标记 ng 重复时做错了什么?
如果有人有任何线索,我将不胜感激。
编辑:
我在 json 中打印了 console.log:
下面是我的例子 JSON return:
[
{
"id":"26",
"idDeles":"zCNTdU",
"data":"2015-02-21",
"titulo":"Didge Steakhouse Pub ",
"descricao":"Noite de s\u00e1bado no Didge Steakhouse Pub em Balne\u00e1rio Cambori\u00fa. ",
"fotografo":"Mariana Haag",
"fonte":"http:\/\/night.com.br\/fotos\/zCNTdU",
"status":"1",
"quantidadeFotos":"78",
"views":"0",
"thumb":"http:\/\/night.com.br\/arquivos\/casas\/50\/fotos\/24790\/tb\/0001_img_0020.jpg"
},
{
"id":"25",
"idDeles":"zqNTdU",
"data":"2015-02-21",
"titulo":"Showbol Arena ",
"descricao":"Noite de s\u00e1bado no Showbol Arena em Itaja\u00ed. ",
"fotografo":"Adivasson Correa",
"fonte":"http:\/\/night.com.br\/fotos\/zqNTdU",
"status":"1",
"quantidadeFotos":"165",
"views":"0",
"thumb":"http:\/\/night.com.br\/arquivos\/casas\/181\/fotos\/24788\/tb\/0001_img_0010.jpg"
}
]
修改后的答案:
$http.get("http://10.1.1.5/nightbc/public/index/phonegap-eventos")
.success(function (response) {
return response.data;
}).error(function (response) {
return error;
});
尝试将 .data 添加到响应中看看是否有效。
在 a 和 img 标签周围放置一个 div 并在其中重复。看看是否有效。
编辑:我没有发现不分配肯定是个问题。如果这仍然不起作用,我对 IMG 等标签中的 ng-repeat 有疑问,所以尝试将它们放在 div 中并在那里重复。
看看JSFiddle我下载了你发布的json因为我无法访问代码中的url。
angular.module('nightbcApp', [])
.factory('EventService', function($http, $q) {
return {
Todos: function() {
var defer = $q.defer();
$http.get("http://localhost/td.json")
.success(function(data){
defer.resolve(data);
})
.error(function(response){
defer.reject(response);
});
return defer.promise;
}
};
})
.controller('EventsController', function($scope, EventService) {
EventService.Todos().then(function(data) {
$scope.Eventos = data;
});
})
我在使用 json 来自 ajax 调用和 ng-repeat 时遇到了很多麻烦。
我已经 post 在此处编辑了我的代码 http://jsfiddle.net/7quj9omw/ 这样您就可以以更有条理的方式查看,虽然我知道它还不完整,运行 这将变得非常庞大错误,它包含 ajax 调用的本地 url。
问题是,我的 JSON 对象检索正常,我可以在我的 EventsController 中 console.log(EventsService.Todos()) 正常,它会注销 JSON对象,但是当传递给标记中的 ng-repeat 时,它将不起作用。
如果我将 JSON 和 post 直接复制到我的代码中,它可以正常工作。 我深深地认为这是一个解析问题,但我已经尝试在我的变量中使用 PARSE.json 但也不起作用。
我是不是在将我的数据从我的服务一直传递到我的 html 标记 ng 重复时做错了什么?
如果有人有任何线索,我将不胜感激。
编辑:
我在 json 中打印了 console.log:
下面是我的例子 JSON return:
[
{
"id":"26",
"idDeles":"zCNTdU",
"data":"2015-02-21",
"titulo":"Didge Steakhouse Pub ",
"descricao":"Noite de s\u00e1bado no Didge Steakhouse Pub em Balne\u00e1rio Cambori\u00fa. ",
"fotografo":"Mariana Haag",
"fonte":"http:\/\/night.com.br\/fotos\/zCNTdU",
"status":"1",
"quantidadeFotos":"78",
"views":"0",
"thumb":"http:\/\/night.com.br\/arquivos\/casas\/50\/fotos\/24790\/tb\/0001_img_0020.jpg"
},
{
"id":"25",
"idDeles":"zqNTdU",
"data":"2015-02-21",
"titulo":"Showbol Arena ",
"descricao":"Noite de s\u00e1bado no Showbol Arena em Itaja\u00ed. ",
"fotografo":"Adivasson Correa",
"fonte":"http:\/\/night.com.br\/fotos\/zqNTdU",
"status":"1",
"quantidadeFotos":"165",
"views":"0",
"thumb":"http:\/\/night.com.br\/arquivos\/casas\/181\/fotos\/24788\/tb\/0001_img_0010.jpg"
}
]
修改后的答案:
$http.get("http://10.1.1.5/nightbc/public/index/phonegap-eventos")
.success(function (response) {
return response.data;
}).error(function (response) {
return error;
});
尝试将 .data 添加到响应中看看是否有效。
在 a 和 img 标签周围放置一个 div 并在其中重复。看看是否有效。
编辑:我没有发现不分配肯定是个问题。如果这仍然不起作用,我对 IMG 等标签中的 ng-repeat 有疑问,所以尝试将它们放在 div 中并在那里重复。
看看JSFiddle我下载了你发布的json因为我无法访问代码中的url。
angular.module('nightbcApp', [])
.factory('EventService', function($http, $q) {
return {
Todos: function() {
var defer = $q.defer();
$http.get("http://localhost/td.json")
.success(function(data){
defer.resolve(data);
})
.error(function(response){
defer.reject(response);
});
return defer.promise;
}
};
})
.controller('EventsController', function($scope, EventService) {
EventService.Todos().then(function(data) {
$scope.Eventos = data;
});
})