Question

我遇到了一个问题，即使用AngularJS显示一个json文件，其中包含两个单词，如下所示：

items: [
{
period: "2017-05-01",
total: 3901,
eloisa moreira: 142,
william morales: 0,
lenilda carvalho: 0,
anamaris gonzalez: 0,
juliana ambroise: 1,
ana luiza theriault: 622,
teresa daveiga: 0
}]

我用：

 <tr ng-repeat="data in data.items">
                <td>{{data.period}}</td>
                <td>{{data.total}}</td> 
                <!--<td>{{data.eloisa moreira}}</td> -->                  
 </tr>

前两个值显示正常，但第三个值：{{data.eloisa moreira}}给我错误： angular.js：13708错误：[$ parse：syntax]语法错误：令牌'moreira'是表达式[data.eloisa moreira]第13列的一个意外标记，从[moreira]开始。任何人如何解决这个问题？

Answer 1

JSON对象中的键包含空格，因此您无法使用点运算符快捷方式索引对象。您应该能够使用传统的索引方法：

<td>{{data['eloisa moreira']}}</td>

Answer 2

如果您打算显示对象的所有字段，则可以使用带ng-repeat的内部(key, value)来避免对象的冗余代码和硬编码属性。

<tr ng-repeat="data in data.items">
  <td ng-repeat="(key, value) in data">{{value}}</td>
</tr>

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = {
      items: [{
        "period": "2017-05-01",
        "total": 3901,
        "eloisa moreira": 142,
        "william morales": 0,
        "lenilda carvalho": 0,
        "anamaris gonzalez": 0,
        "juliana ambroise": 1,
        "ana luiza theriault": 622,
        "teresa daveiga": 0
      }]
    };
  });

.solid {
  border: 1px;
  border-style: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <table class="solid">
    <tr ng-repeat="data in data.items">
      <!--<td>{{data.period}}</td>
      <td>{{data.total}}</td>
      <td>{{data.eloisa moreira}}</td> -->
      <td ng-repeat="(key, value) in data">{{value}}</td>
    </tr>
  </table>
</div>

如何使用AngularJS显示json API的关键是两个字？

2 个答案: