无法从控制器传递 JSON 列表数据以查看答案

【问题标题】：Unable to pass JSON list data from a controller to view无法从控制器传递 JSON 列表数据以查看
【发布时间】：2016-06-09 13:48:52
【问题描述】：

这不起作用：
index.html：

<!doctype html>
<html ng-app>

<head>
  <title>Angular js Hello World</title>

  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body ng-controller="CustomersController" ng-init="">

  <h2>Customers</h2> Filter: <input type="text" ng-model="customerFilter.name">
  <br><br>
  <span class="pre-search">Your Search:</span>&nbsp;<span class="search-term">{{customerFilter.name}}</span>
  <br><br>
  <table>
    <tr>
      <th ng-click="doSort('name')">Name</th>
      <th ng-click="doSort('city')">City</th>
      <th ng-click="doSort('orderTotal')">Order Total</th>
      <th ng-click="doSort('joined')">Joined</th>
    </tr>
    <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reversed">
      <td>{{cust.name | lowercase}}</td>
      <td>{{cust.city}}</td>
      <td>{{cust.orderTotal | currency}}</td>
      <td>{{cust.joined | date}}</td>
    </tr>
  </table>

  <span>Total Customers : {{customers.length}}</span>

  <script type="text/javascript" src="assets/js/angular.js"></script>
  <script type="text/javascript" src="app/controllers/CustomersController.js"></script>
</body>

</html>

CustomersController.js 文件：

function CustomersController($scope) {
  $scope.sortBy = 'name';
  $scope.reversed = false;

  $scope.customers = "[{joined:'1984-06-29', name:'Virat Kohli',     city:'banglore', orderTotal:'90.9468'}, {joined:'1920-03-19', name:'Yuvraj Singh', city:'vijayawada', orderTotal:'300.454'}, {joined:'1980-08-03', name:'MS Dhoni', city:'katamnallur', orderTotal:'35.78'}, {joined:'2010-01-23', name:'Michael Jordan', city:'Hoskote', orderTotal:'45.10'}]";
  $scope.doSort = function(propName) {
      $scope.sortBy = propName; 
      $scope.reversed =! $scope.reversed;
  }
}

当我将数据添加到视图时一切正常：

ng-init="customers=[{joined:'1984-06-29', name:'Virat Kohli', city:'banglore', orderTotal:'90.9468'}, {joined:'1920-03-19', name:'Yuvraj Singh', city:'vijayawada', orderTotal:'300.454'}, {joined:'1980-08-03', name:'MS Dhoni', city:'katamnallur', orderTotal:'35.78'}, {joined:'2010-01-23', name:'Michael Jordan', city:'Hoskote', orderTotal:'45.10'}]"

我无法区分，可能只是一个简单的愚蠢错误，我可以理解cz我犯了很多菜鸟错误。非常感谢。请回答。仅供参考，我的代码中不存在 jason 数据中的空白，这是在放入此代码时创建的。

【问题讨论】：

删除 $scope.customers 前后的引号。您将其分配为字符串

标签： javascript angularjs json model-view-controller

【解决方案1】：

可能是这个问题

$scope.customers = "[{joined:'1984-06-29', name:'Virat Kohli',     city:'banglore', orderTotal:'90.9468'}, {joined:'1920-03-19', name:'Yuvraj Singh', city:'vijayawada', orderTotal:'300.454'}, {joined:'1980-08-03', name:'MS Dhoni', city:'katamnallur', orderTotal:'35.78'}, {joined:'2010-01-23', name:'Michael Jordan', city:'Hoskote', orderTotal:'45.10'}]";

$scope.customers 似乎是一个字符串而不是 json 数组

去掉那些"。应该是这样的

 $scope.customers= [{
    joined: '1984-06-29',
    name: 'Virat Kohli',
    city: 'banglore',
    orderTotal: '90.9468'
}, {
    joined: '1920-03-19',
    name: 'Yuvraj Singh',
    city: 'vijayawada',
    orderTotal: '300.454'
}, {
    joined: '1980-08-03',
    name: 'MS Dhoni',
    city: 'katamnallur',
    orderTotal: '35.78'
}, {
    joined: '2010-01-23',
    name: 'Michael Jordan',
    city: 'Hoskote',
    orderTotal: '45.10'
}]

【讨论】：

我不认为这是一个错字。让我假设使用 " 是一个错字，但是在 json 数组的开头和结尾犯同样的错误是令人惊讶的

【解决方案2】：

当您在 init 中调用它时，您实际上是在执行将客户设置为一组对象。当您是控制器中的设置客户时，您将其设置为字符串。

【讨论】：