Question

我有一个显示JSON数据的问题，我将传递给html控件中显示。我有一个看起来正确和精细的设置模块： //为我们的应用定义角度模块 var AngularJSTest = angular.module（＆＃39; AngularJSTest＆＃39;，[＆＃39; ui.router＆＃39;]）; //定义应用程序的路由 AngularJSTest.config（[＆＃39; $ stateProvider＆＃39;，＆＃39; $ urlRouterProvider＆＃39;， function（$ stateProvider，$ urlRouterProvider）{ $ stateProvider。州（＆＃39; home＆＃39;，{ 名称：＆＃39; home＆＃39;， templateUrl：＆＃39; AngularJSTestPage.html＆＃39;，控制器：＆＃39; AngularJSTestPageCtrl＆＃39; }） }]）; 然后在我的控制器中，我获取了我的JSON数据并存储在testAccounts中： AngularJSTest.controller（＆＃34; AngularJSTestPageCtrl＆＃34;，[＆＃34; $ scope＆＃34;，＆＃34; $ http＆＃34;，function（$ scope，$ http）{ $ http.get（＆＃39; http：// localhost：53215 / IBookService.svc / GetBooksList＆＃39;）。success（function（data）{ $ scope.testAccounts = data; $ scope.selectedTestAccount = $ scope.testAccounts [0]; }）; }]）; 我测试过我的结果在我写的时候回来了： CONSOLE.LOG（$ scope.testAccounts）; 这返回了我的所有JSON，如下所示： [{＆＃34; BOOKNAME＆＃34;：＆＃34; TEST1＆＃34;＆＃34; ID＆＃34;：1}，{＆＃34; BOOKNAME＆＃34;：＆＃34; TEST2＆＃34; ＆＃34; ID＆＃34;：2}，{＆＃34; BOOKNAME＆＃34;：＆＃34;测试＆＃34;＆＃34; ID＆＃34;：3}] 最后，在我的HTML中，我正在使用＆＃39; ng-options＆＃39;并选择所有＆＃39; BookName＆＃39;从我的JSON数据：＆lt; body ng-app =＆＃34; AngularJSTest＆＃34;＆gt; ＆lt; div ng-controller =＆＃34; AngularJSTestPageCtrl＆＃34;＆gt; ＆lt; select class =＆＃34; form-control＆＃34;数据-NG-模型=＆＃34; selectedTestAccount＆＃34; data-ng-options =＆＃34; item.BookName for testAccounts＆＃34;＆gt;中的项目＆lt; option label =＆＃34; - ANY - ＆＃34;＆gt;＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; 错误当我加载项目时，控件显示了84个标签的列表，其中包含“未定义的”＃。任何人都知道为什么会发生这种情况？编辑以下是URL返回的内容： JSON图像编辑2 我从WCF服务获取数据如下，这是不正确的？公共列表＆lt; DC_BOOK＆gt;图书（） { 列表与LT; DC_BOOK＆GT; listBook = new List＆lt; DC_BOOK＆gt;（）; DC_BOOK books = new DC_BOOK（）; books.ID = 1; books.BookName =＆＃34; test1＆＃34 ;; listBook.Add（书籍）; DC_BOOK books1 = new DC_BOOK（）; books1.ID = 2; books1.BookName =＆＃34; test2＆＃34 ;; listBook.Add（books1）; DC_BOOK books2 = new DC_BOOK（）; books2.ID = 3; books2.BookName =＆＃34; test＆＃34 ;; listBook.Add（books2）; return listBook; } public string GetBooksList（） { 使用（SampleDbEntities entities = new SampleDbEntities（）） { //将结果序列化为JSON DataContractJsonSerializer serializer = new DataContractJsonSerializer（Books（）。GetType（））; MemoryStream memoryStream = new MemoryStream（）; serializer.WriteObject（memoryStream，Books（））; //返回序列化为JSON的结果 string json = Encoding.Default.GetString（memoryStream.ToArray（））; 返回json; // return entities.Books.ToList（）; } }

Answer 1

正如你所说，返回的字符串长度正好是84个字符，你得到84个未定义的错误。您的svc似乎没有返回正确的JSON标头，因此返回的JSON字符串被视为84个元素的数组。试试这个：

AngularJSTest.controller("AngularJSTestPageCtrl", ["$scope", "$http", function ($scope, $http) {
    $http.get('http://localhost:53215/IBookService.svc/GetBooksList').success(function (data) {

        $scope.testAccounts = JSON.parse(data);
        $scope.selectedTestAccount = $scope.testAccounts[0];

    });
}]);

Answer 2

因此，在构建完这个示例之后，我没有遇到框没有正确加载数据的问题。我改变的唯一一件事就是分配范围变量的方式

$scope.testAccounts = data;
$scope.selectedTestAccount = data[0];

Here is my plnkr

在<select>中使用AngularJS显示JSON数据（错误）

2 个答案: