angularJs <ng-repeat>用于加载json

时间:2017-02-21 16:30:38

标签: javascript angularjs json

我尝试在我的example-SPA应用程序中加载json文件但是出于某些动机,我不明白为什么当我尝试运行我的应用程序时,控制器不会填满我的浏览器选项卡...我是初学者,这是我试图解决这个问题的第二天,但我认为我的解决方案已经解决了。 在这里我的代码:

<html ng-app="beerApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="js/libs/angular.js/angular.js" type="text/javascript"></script>
    <script src="beerApp.js" type="text/javascript"></script>
  </head>
  <body ng-controller="beerCtrl">
    Search:<input ng-model="query" type="text"/>
    <table>
      <tr>
        <th><a>Name</a></th>
        <th>Description</th>
        <th><a href="" ng-click="sortField = 'abv'">Abv</a></th>
        <th><a href="" ng-click="sortField = 'name'">Ibu</a></th>

      </tr>
      <tr ng-repeat="beer in beers | filter:query | orderBy:sortField">
        <td>{{beer.name}}</td>
        <td>{{beer.descript}}</td>
        <td>{{beer.abv}}</td>
        <td>{{beer.ibu}}</td>
      </tr>
    </table>
  </body>
</html>

http://plnkr.co/edit/rBlt7tnCN8j0ys2HS7PZ?p=preview

提前谢谢 桦林 PS。完整版本在plnkr上

1 个答案:

答案 0 :(得分:1)

您需要在plnker中添加index.html标签。查看结果here

它按预期工作!