Angularjs: 无法使用 ng-repeat 显示数组项

Question

我正在使用 AngularJs 从 ASP.Net 控制器检索数据。 Json 数据是从服务器检索的，但无法弄清楚为什么在使用 ng-repeat 时无法显示数组项：

  var app = angular.module('Appp', []);
        app.controller('metadataCtrl', function ($scope, $http) {

       
            $scope.lookupItems = {};
            $http({ method: 'GET', url: '/home/listvalues?listid=3' }).then(function (response) {
                $scope.lookupItems = response;
                console.log($scope.lookupItems);
            },
               function (error) { alert("error"); });

           // console.log($scope.listItems);

        });

   <form name="myForm" ng-controller="metadataCtrl" class="my-form">
   
          <div ng-repeat="item in lookupItems">
              {{$index}}
              {{item.ListValueID}}
        </div>
   </form>

从服务器检索到的Json：

[{"ListValueID":13,"Translation":{"TranslationID":0,"Value":"Important","LanguageValues":{"ar":"مهم","en":"Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 {"ListValueID":14,"Translation":{"TranslationID":0,"Value":"Less Importance","LanguageValues":{"ar":"أقل أهمية","en":"Less Importance"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 
 {"ListValueID":15,"Translation":{"TranslationID":0,"Value":"Very Important","LanguageValues":{"ar":"كثير الأهمية","en":"Very Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0}]

Answer 1

最有可能的问题（假设您的应用程序和控制器已正确构建和引用）是从 promise 返回的对象包含一个 .data 属性，它实际上包含您的 JSON数据。

试试这个：

$http({ method: 'GET', url: '/home/listvalues?listid=3' })
    .then(function (response) {
        $scope.lookupItems = response.data;
        console.log($scope.lookupItems);
    },
    function (error) { 
        alert("error"); 
    });

Answer 2

我想你只是忘了用 ng-app 包装你的应用程序：

var app = angular.module('Appp', []);
        app.controller('metadataCtrl', function ($scope, $http) {

       
            $scope.lookupItems = {};
            
 $scope.lookupItems = [{"ListValueID":13,"Translation":{"TranslationID":0,"Value":"Important","LanguageValues":{"ar":"مهم","en":"Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 {"ListValueID":14,"Translation":{"TranslationID":0,"Value":"Less Importance","LanguageValues":{"ar":"أقل أهمية","en":"Less Importance"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 {"ListValueID":15,"Translation":{"TranslationID":0,"Value":"Very Important","LanguageValues":{"ar":"كثير الأهمية","en":"Very Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0}];
                console.log($scope.lookupItems);
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Appp">
   <form name="myForm" ng-controller="metadataCtrl" class="my-form">
   
          <div ng-repeat="item in lookupItems">
              {{$index}}
              {{item.ListValueID}}
        </div>
   </form>
</body>

Answer 3

你可能拼错了 Appp。确保你的模块定义在你的 javascript:

 var app = angular.module('App', []);  //Changed to App from Appp

匹配您在 html

中的应用声明

<div ng-app="App">
...controller declaration...
...body.....
</div>

Angularjs: 无法使用 ng-repeat 显示数组项

Angularjs: Cannot display array items using ng-repeat

json

asp.net-mvc-3

angularjs