在 Asp.NET MVC 上使用 angularjs 访问 Json 的数据

Question

大家好，我有问题..实际上我不知道如何使用 angularjs 访问 json 中的一些数据。我只是在学习angularjs。

<div ng-controller="KurumsalYonetimCtrl">
    <p>{{model | json}}</p>
    <div ng-repeat="item in model">
        <p>{{item.Id}}</p>
        <p>{{item.Baslik}}</p>
        <p>{{item.Aciklama}}</p>
        <p>{{item.ResimYolu}}</p> /*This is PicturePath but it doesnt show*/
    </div>

</div>

AngularJS 控制器代码

    var app = angular.module('KurumsalYonetimController', []);
    app.controller('KurumsalYonetimCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.model = {};
        $http.get('/KUN/KurumsalYonetim/JsonListele').success(function (data) {
            $scope.model = data;
        });
    }]);

JSON 数据

[
      {
        "Pictures": [
          {
            "history": null,
            "landTransportation": null,
            "partialManagment": null,
            "projectTransportation": null,
            "userDetail": null,
            "Baslik": "Hakkimizda Resim",
            "Kategori": "Genel",
            "Aciklama": null,
            "ResimYolu": "1b066060-d230-45d7-a7ed-fc87bf3bd7d1_profile_avatar.jpg",
            "aboutUsId": 5,
            "historyId": null,
            "landTransportationId": null,
            "projectTransportationId": null,
            "partialManagmentId": null,
            "userDetailId": null,
            "Id": 5,
            "isDeleted": false,
            "CreatedDate": "2015-07-09T02:02:44.473",
            "UpdatedDate": "2015-07-09T02:02:44.473",
            "hasPicture": false
          }
        ],
        "userDetail": null,
        "Baslik": "deneme baslik",
        "Aciklama": "deneme aciklama",
        "userDetailId": null,
        "Id": 5,
        "isDeleted": false,
        "CreatedDate": "2015-07-09T02:02:44.16",
        "UpdatedDate": "2015-07-09T02:02:44.553",
        "hasPicture": true
      }
    ]

我无法访问此 json 结果中的图片，但我可以访问这些数据。如何也访问图片

  "userDetail": null,
    "Baslik": "deneme baslik",
    "Aciklama": "deneme aciklama",
    "userDetailId": null,
    "Id": 5,
    "isDeleted": false,
    "CreatedDate": "2015-07-09T02:02:44.16",
    "UpdatedDate": "2015-07-09T02:02:44.553",
    "hasPicture": true
  }

Answer 1

您的 JSON 看起来有问题。您可以访问底部的原因是您正在循环遍历一组对象。

 {
        "Pictures": [
          {
            "history": null,
            "landTransportation": null,
            "partialManagment": null,
            "projectTransportation": null,
            "userDetail": null,
            "Baslik": "Hakkimizda Resim",
            "Kategori": "Genel",
            "Aciklama": null,
            "ResimYolu": "1b066060-d230-45d7-a7ed-fc87bf3bd7d1_profile_avatar.jpg",
            "aboutUsId": 5,
            "historyId": null,
            "landTransportationId": null,
            "projectTransportationId": null,
            "partialManagmentId": null,
            "userDetailId": null,
            "Id": 5,
            "isDeleted": false,
            "CreatedDate": "2015-07-09T02:02:44.473",
            "UpdatedDate": "2015-07-09T02:02:44.473",
            "hasPicture": false
          }
        ],
        "userDetail": null,
        "Baslik": "deneme baslik",
        "Aciklama": "deneme aciklama",
        "userDetailId": null,
        "Id": 5,
        "isDeleted": false,
        "CreatedDate": "2015-07-09T02:02:44.16",
        "UpdatedDate": "2015-07-09T02:02:44.553",
        "hasPicture": true
      }

这就是一个对象，即您的item 在您的ng-repeat 中。因此，当您循环时，它可以抓取 Id, Aciklama 等。您没有获得图片的 Id 的原因是因为它是一个嵌套的对象数组。您必须进入另一个级别才能在图片数组中获取Id, Baslik 等。

要循环播放图片，请执行以下操作： $scope.Pictures = model[0].Pictures; 然后item in Pictures

在我看来，您的 JSON 格式不正确。

编辑

在 cmets 中进行了一些反馈后，JSON 看起来应该是它应该的样子。您只需要进行我上面详述的更改即可在您的 ng-repeat 中获取图片数据。