Question

我在AngularJS中从嵌套JSON中提取整数值时遇到问题。来自同一层的字符串和来自父层的所有数据都处于良好状态，但数字被视为“空”。其他一切似乎都正常工作。

E.g。 - 'thumbnail'，一个字符串，拉得很好，而thumbnail-height，一个JSON同一层上的整数值，显然是空的。

我的代码的精简版本here提供了我想要提取的数据示例，我已将其粘贴到下面。

简而言之，我想知道为什么 {{card.acf.thumbnail_image.sizes.thumbnail-height}} 返回'null'。

提前感谢任何有关为什么不起作用的建议！

JS：

var app = angular.module('myApp', [ ]);

app.controller('CardController', function($scope,$http) {
    var data = 
[
   {
      "ID":5303,
      "acf":{
         "thumbnail_image":{
            "width":2286,
            "sizes":{
               "thumbnail":"thumbnail1.png",
               "thumbnail-height":91
            }
         }
      }
   },
   {
      "ID":5290,
      "acf":{
         "thumbnail_image":{
            "width":1369,
            "sizes":{
               "thumbnail":"thumbnail2.png",
               "thumbnail-height":80
            }
         }
      }
   }
]
    $scope.dataList = data;
});

HTML：

<div ng-app="myApp">

    <div ng-controller="CardController as tc">

        <ul>http://jsfiddle.net/axrys5cr/1/#fork
            <li ng-repeat="card in dataList">
                <h1>{{card.ID}}</h1>
            <p>card.acf: {{ card.acf }}</p>

            <hr>
            <p>card.acf.thumbnail_image.width: {{ card.acf.thumbnail_image.width }}</p>
            <hr>
                <p><b>card.acf.thumbnail_image.sizes.thumbnail-height:</b> {{ card.acf.thumbnail_image.sizes.thumbnail-height }}</p>
                <p><b>card.acf.thumbnail_image.sizes.thumbnail:</b> {{ card.acf.thumbnail_image.sizes.thumbnail }}</p>
            </li>
        </ul>

    </div>

</div>

Answer 1

{{ card.acf.thumbnail_image.sizes.thumbnail-height }}

应该是

{{ card.acf.thumbnail_image.sizes['thumbnail-height']}}因为thumbnail-height键包含无效的字符-。

Answer 2

使用dot notation时，密钥不能包含连字符-。所以当你绑定到：

{{ card.acf.thumbnail_image.sizes.thumbnail-height }}

您实际说的是：card.acf.thumbnail_image.sizes.thumbnail 减去 height。

您可以改为使用bracket notation：

{{ card.acf.thumbnail_image.sizes["thumbnail-height"] }}

AngularJS - 嵌套JSON中返回null的整数

2 个答案: