【问题标题】:AngularJs ng-repeat does not dispay values even when model has values即使模型有值,AngularJs ng-repeat 也不显示值
【发布时间】:2014-10-14 19:00:27
【问题描述】:

我正在使用 AngularJs 显示由 nodejs 路由“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);


});

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

这段代码看起来非常简单明了。我是 angularjs 的新手,因此我无法弄清楚问题所在。该列表迭代对象的数量,但不显示名称。我尝试使用 Angular Batarang 进行调试,发现以下内容。

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

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

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 sn-p:

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

【问题讨论】:

  • 如果您对 Angular 有任何疑问,请在问题中包含 angular 代码。如果您想提供一个包含多个文件的示例,也可以考虑plnkr.co
  • 我什么都没改变,只是 URL;在此处查看工作示例:plnkr.co/edit/T3aHvQzbrgAEoZafdyD1?p=preview
  • @Yoshi 我的 Angular 代码与 html 一起在小提琴中提供
  • @NewtonCode 问题是,每当 jsfiddle 出现故障或链接因其他原因而断开时,您的问题对于未来的访问者将变得无法使用。这就是为什么您应该始终在您的问题 中包含有问题的代码。见:Help Center > Asking: Help others reproduce the problem
  • 谢谢@Yoshi,我现在已经包含了角度代码以及问题。您能否提供一些关于为什么 $http.get 在这种情况下不起作用的线索。似乎硬编码 json 工作正常。

标签: javascript json node.js angularjs


【解决方案1】:

我检查了你的jsfiddle,你的$http.get(url);会有问题

正如我所见,您没有通过 get 调用获得正确的承诺对象检查。

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

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

【讨论】:

  • 我在 $http.get 中做错了什么?是的,这是使用模拟数据。但我不知道我们为什么会这样
  • 你能检查你的工厂服务,它没有返回承诺对象。我删除了 jquery 之类的脚本和您包含的其他脚本。
  • 工厂服务返回承诺对象正常。我返回 3 个对象和 ng-repeat 循环 3 次,但它似乎无法访问属性。我附上了使用 angular baatrang 检查的屏幕截图。它表明对象必须查看。我不明白为什么会这样。
  • 根据 Maxim Shoustin 的说法,我还检查了 plunker 是否可以正常工作。您的 jsfiddle 有问题,您可以使用新的更好。与 plunker 合作
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-15
  • 1970-01-01
  • 2012-09-03
  • 2021-02-06
相关资源
最近更新 更多