2016-06-09 58 views
-1

这不起作用:
的index.html:无法从控制器通过JSON列表数据查看

<!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'}]" 

我无法获得区别,m唉,这只是一个简单的愚蠢的错误,我可以理解,因为我犯了很多新秀错误。很多。请回答。我的代码中没有提供杰森数据中的FYI差距,这些差距在创建时加以创建。

+0

删除'$ scope.customers'之前和之后的引号。你把它分配为字符串 – Rajesh

回答

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' 
}] 
+0

我不认为它是一个错字。让我假设使用“是一个错字,但一开始犯了同样的错误,一个在json数组结尾是令人惊讶的 – brk

0

当你在init中调用它,你必须执行该设置,将客户设置为一组对象。当您在控制器中设置客户时,将其设置为字符串。