2016-09-30 81 views
0

我想從json文件加載數據到我的角度模塊,而不是我得到這個數據。從json文件加載數據到角度模塊

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

app.controller("myCtrl",function($scope, $http) 
{ 
    $http.get('bookData.json').then(function(response){ 

     $scope.books = response.data; 
    }); 
}); 

在我看來,將數據顯示:

<body ng-controller="myCtrl"> 
    <div>{{"Book details"}}</div> 
    <div> 
     <table> 
     <tr ng-repeat="x in books"> 
      <td>x.bookid</td> 
      <td>x.author</td> 
     </tr> 
     </table> 
    </div> 
<script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script> 
    <script src="app.js"></script> 
    </body> 
</html> 

,但我發現輸出:

Book details 

x.bookid x.author 
x.bookid x.author 
x.bookid x.author 
x.bookid x.author 

https://plnkr.co/edit/ZqcnwOKZUdUo5eDIdjlh?p=preview

回答

3

您需要{{來包裝你的邏輯和}}使其可以通過角度識別。否則,它會以純文本的形式打印出來。

e.g

<td>{{x.bookid}}</td> 
<td>{{x.author}}</td> 
+1

啊,是的作品!這是一個愚蠢的錯誤。非常感謝你。 –

0
<body ng-controller="myCtrl"> 
    <div> 
     <H1>Book details</H1> 
    </div> 
    <div> 
     <table> 
      <tr ng-repeat="x in books"> 
       <td>{{x.bookid}}</td> 
       <td>{{x.author}}</td> 
      </tr> 
     </table> 
+0

您應該避免僅編碼答案。 – croxy