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

时间:2016-06-09 13:48:53

标签: javascript angularjs json model-view-controller

这不起作用:
的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数据中的FYI差距,这些差异是在我们的代码中创建的。

2 个答案:

答案 0 :(得分: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'
}]

答案 1 :(得分:0)

当您在init中调用它时,基本上执行将客户设置为对象数组。当您在控制器中设置客户时,请将其设置为字符串。