即使模型具有值,AngularJs ng-repeat也不显示值

时间:2014-08-21 08:12:24

标签: javascript json node.js angularjs

我使用AngularJs显示nodejs route'api / getItems'提供的名称列表 返回

router.get('/getItems',function(req,res,next){

var model = [{"_id":"53f4cde40864fca70c2434cf","name":"John Smith"},
                 {"_id":"23f4bde40864fba70c2434cf","name":"Smith John"},
                 {"_id":"592f4cde40864fca70c2434cf","name":"Albert Test"}]; 
      res.json(model);


});

请在这个小提琴中找到我的html代码和角度代码(app.js)here

此代码看起来非常简单明了。我是angularjs的新手,因此我无法弄清楚问题是什么。该列表迭代了对象的数量,但没有显示名称。我已经尝试使用Angular Batarang进行调试,并找到了以下内容。

enter image description here

有人可以帮我解决我在这里做错的事吗?非常感谢你

在下面添加我的角度代码。

var app = angular.module('sampleApp', []);

app.factory('TestService', function ($http, $q) {

    return ({
        getItems : getItems 
    });

    function getItems(){

        var request = $http({
                             method: "Get",
                             url: "api/getitems"                        
                            });

        return( request.then( handleSuccess, handleError ) );
    }

    function handleError( response ) {

        if (! angular.isObject( response.data ) ||! response.data.message) {

            return( $q.reject( "An unknown error occurred." ) ); 
        }          
        return( $q.reject( response.data.message ) ); 
    }

    function handleSuccess( response ) { 
        return( response.data ); 
    }


});

app.controller('TestController', ['$scope', 'TestService', function ($scope, TestService) {

    $scope.model= [];
    $scope.model.TestList= [];

    loadRemoteData();

    function loadRemoteData(){
        TestService.getItems().then(function(data){
                applyRemoteData(data);
        });
    }

    function applyRemoteData( WorkItems ) {
        $scope.model.TestList = WorkItems;
    }    

}]);

html片段:

<body ng-app="sampleApp">
    <div ng-controller="TestController"> 
             <div  ng-repeat="item in model.TestList">
                <p>Name :</p> {{item.name}} 
             </div>             
    </div>
</body>

1 个答案:

答案 0 :(得分:1)

我用你的jsfiddle检查过你的$http.get(url);

会有问题

因为我看到你没有得到正确的承诺对象检查与接到电话。

所以我尝试使用模拟数据通过分叉并在jsfiddle中进行了一些更改并删除了html中的一些脚本标记。

here is the updated jsfiddle which works fine which your looking for