Ng-repeat不显示json数据

时间:2015-03-19 23:10:10

标签: javascript json angularjs

感谢提前获得任何支持。所以我有一个工厂使用一个帖子从C#方法获取一些数据。这一切似乎都有效,因为我可以在返回时看到控制台日志中的数据。但是,当我获得数据时,我似乎无法使用ng-repeat正确显示数据。

我尝试了几种不同的嵌套方式,但仍然没有运气。所以现在我想我可能没有正确地传递来自呼叫的数据或我的范围已关闭。我还尝试将data.d传递给hangar.ships而不仅仅是数据。对角度来说还是很新的所以在任何帮助中指出我正确的方向都非常感激。

应用代码:

var app = angular.module('shipSelection', ['ngRoute', 'ngResource']);
app.controller('ShipController', function ($scope, ShipService) {
    var hangar = this;
    hangar.ships = [];

var handleSuccess = function (data, status) {
    hangar.ships = data;

    console.log(hangar.ships);
};

ShipService.getShips().success(handleSuccess); 

});

app.factory('ShipService', function ($http) {
    return {
        getShips: function () {
            return $http({
                url: '/ceresdynamics/loadout.aspx/getships',
                method: "post",
                data: {},
                headers: { 'content-type': 'application/json' }
            });
        }
    };
});

标记:

<div class ="col-lg-12" ng-controller="ShipController as hangar" > 
    <div class =" row">
        <div class="col-lg-4" ><input ng-model="query" type="text"placeholder="Filter by" autofocus> </div>
    </div><br />
        <div class="row"> 
            <div ng-repeat="ship in hangar.ships | filter:query | orderBy:'name'">              
             <div class="col-lg-4">    
                <div class="panel panel-default">        
                    <div>
                        <ul class="list-group">
                            <li class="list-group-item" >
                               <p><strong>ID:</strong> {{ ship.ShipID }} <strong>NAME:</strong> {{ ship.Name }}</p>
                                           <img ng-src="{{ship.ImageFileName}}" width="100%" />      
                            </li>
                        </ul>
                    </div>                                              
                </div><!--panel-->
              </div> <!--ng-repeat-->
            </div>  
       </div> 
  </div> <!--ng-controller--> 

从帖子返回JSON(来自console.log(hangar.ships):

Object
d: "[{"ShipID":"RDJ4312","Name":"Relentless","ImageFileName":"Ship2.png"},{"ShipID":"ZLH7754","Name":"Hercules","ImageFileName":"Ship3.png"},{"ShipID":"FER9423","Name":"Illiad","ImageFileName":"Ship4.png"}]"
__proto__: Object

1 个答案:

答案 0 :(得分:0)

根据AngularJS 1.2版,数组不再从Promise中解包(默认情况下)(请参阅迁移说明)。我已经看到它仍在使用Objects,但根据文档,您也不应该依赖它。

请参阅此回答Angular.js not displaying array of objects retrieved from $http.get

如果添加JSON.parse(data);

会发生什么

如果这样做,您应该添加一些检查,并可能将该逻辑迁移到服务。或者根据其他答案使用$ resource。

https://github.com/angular/angular.js/commit/fa6e411da26824a5bae55f37ce7dbb859653276d