使用 ng-repeat 从 JSON 中获取数据 |角度 1.5

Question

我这里有个小问题，不知道怎么解决..

我想从此 JSON 中获取 descriptions：

    { story:
   [ { description: 'Paketet är påväg.',
       icon: 'https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/parceltrace.png' },
     { date: '2016-08-26T10:21:02+02:00',
       icon: 'https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/parceltrace.png',
       description: 'Paketet är redo för upphämtning.' },
     { date: '2016-08-25T11:15:11+02:00',
       icon: 'https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png',
       description: 'Paketet har hanterats i terminal.' },
     { date: '2016-08-25T09:08:59+02:00',
       icon: 'https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png',
       description: 'Paketet har hanterats i terminal.' },
     { date: '2016-08-24T12:35:36+02:00',
       icon: 'https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png',
       description: 'Paketet har hanterats i terminal.' },
     { date: '2016-08-24T12:19:29+02:00',
       icon: 'https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png',
       description: 'Paketet har hanterats i terminal.' } ],
  data:
   { height: '12 cm',
     width: '16 cm',
     depth: '20 cm',
     weight: '0 kg' } }

这是 HTML：

<ul class="ul-card" ng-repeat="item in story.description">
    <li>
        <i class="right-text fa fa-check-circle fa-2x"></i>
        <p class="left-text">{{item.description}}</p>
        <p class="left-text subtitle">26 jun 2017 16:32</p>
        <p class="left-text">Leveransen har blivit levererad</p>
    </li>
</ul>

我的逻辑：

在我的ul 标签中，我放置了一个ng-repeat 指令来循环遍历我的故事对象中的所有描述（如果我是正确的）。然后，我使用{{item.description}} 表达式从item 获取描述。但是即使 DOM 元素被删除，也没有任何输出。

所以我被困在这里，我需要一些帮助。我非常感谢我能得到的所有帮助。

谢谢！

Answer 1

首先，您需要将来自 API 的数据存储在 $scope 中，如下所示：

$scope.myApiData = { story: [ { description: ...

代替：

<ul class="ul-card" ng-repeat="item in story.description">

这样做：

<ul class="ul-card" ng-repeat="item in myApiData.story">

Answer 2

如果你的 json 在你的控制器中是这样的：

$scope.data = {
                "story": [
                    {
                        "description": "Paketet är påväg.",
                        "icon": "https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/parceltrace.png"
                    },
                    {
                        "date": "2016-08-26T10:21:02+02:00",
                        "icon": "https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/parceltrace.png",
                        "description": "Paketet är redo för upphämtning."
                    },
                    {
                        "date": "2016-08-25T11:15:11+02:00",
                        "icon": "https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png",
                        "description": "Paketet har hanterats i terminal."
                    },
                    {
                        "date": "2016-08-25T09:08:59+02:00",
                        "icon": "https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png",
                        "description": "Paketet har hanterats i terminal."
                    },
                    {
                        "date": "2016-08-24T12:35:36+02:00",
                        "icon": "https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png",
                        "description": "Paketet har hanterats i terminal."
                    },
                    {
                        "date": "2016-08-24T12:19:29+02:00",
                        "icon": "https://s3-eu-west-1.amazonaws.com/qlocx-bilder/public/checkbox.png",
                        "description": "Paketet har hanterats i terminal."
                    }
                ],
                "data": {
                    "height": "12 cm",
                    "width": "16 cm",
                    "depth": "20 cm",
                    "weight": "0 kg"
                }
            };    

在您的 html 中，您应该这样做：

<ul class="ul-card" ng-repeat="item in data.story">
    <li>
        <i class="right-text fa fa-check-circle fa-2x"></i>
        <p class="left-text">{{item.description}}</p>
        <p class="left-text subtitle">26 jun 2017 16:32</p>
        <p class="left-text">Leveransen har blivit levererad</p>
    </li>
</ul>