Question

我正在尝试创建一个快速原型并且数据无法加载。会是什么呢？我也添加了一个小提琴：

HTML

    <div class="container" ng-app="usersApp" ng-controller="UsersCtrl">
  <table class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Percentage</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='client in clients'>
        <td>{{ client.id }}</td>
        <td>{{ client.name }}</td>
        <td>{{ client.age }}</td>
        <td>{{ client.percentage }}</td>
      </tr>
    </tbody>
  </table>
</div>

JS

angular.module('clientsApp').controller('ClientsCtrl', function($scope) {
  $scope.clients = [
    { id: 1, name: 'John', age: 25, percentage: 0.3 },
    { id: 2, name: 'Jane', age: 39, percentage: 0.18 },
    { id: 3, name: 'Jude', age: 51, percentage: 0.54 },
    { id: 4, name: 'James', age: 18, percentage: 0.32 },
    { id: 5, name: 'Javier', age: 47, percentage: 0.14 }
  ];
});

https://jsfiddle.net/gb3n6xjg/

Answer 1

您有几个问题：

1）您的'clientsApp'模块声明错误。

angular.module('clientsApp')应为angular.module('clientsApp',[])

2）此外，您没有使用ng-app指令调用正确的模块。

ng-app="usersApp"应为ng-app="clientsApp"

3）要在JSFiddle中使用angularjs，您还需要将运行模式从 onLoad 更改为 No Wrap - in

Working Fiddle

Answer 2

有几个问题导致它无效：。

应用程序的名称（clientsApp）和控制器的名称（ClientsCtrl）在标记和JavaScript中有所不同。请参阅代码段中的更正标记
您没有声明名为clientsApp的模块。您首先需要在使用此语法

angular.module('clientsApp', []);

在小提琴上，使用onload事件加载Angular库 - 我将其更改为No wrap - in <body>以使其正常工作here

＆＃13;

angular.module('clientsApp', []);
angular.module('clientsApp').controller('ClientsCtrl', function($scope) {
  $scope.clients = [{
    id: 1,
    name: 'John',
    age: 25,
    percentage: 0.3
  }, {
    id: 2,
    name: 'Jane',
    age: 39,
    percentage: 0.18
  }, {
    id: 3,
    name: 'Jude',
    age: 51,
    percentage: 0.54
  }, {
    id: 4,
    name: 'James',
    age: 18,
    percentage: 0.32
  }, {
    id: 5,
    name: 'Javier',
    age: 47,
    percentage: 0.14
  }];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

<body>
  <div class="container" ng-app="clientsApp" ng-controller="ClientsCtrl">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Age</th>
          <th>Percentage</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='client in clients'>
          <td>{{ client.id }}</td>
          <td>{{ client.name }}</td>
          <td>{{ client.age }}</td>
          <td>{{ client.percentage }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

＆＃13;

数据未加载在快速angularjs原型中

2 个答案:

您有几个问题：