【问题标题】:ng-repeat is not binding the datang-repeat 没有绑定数据
【发布时间】:2016-07-09 19:22:16
【问题描述】:

我是 angularjs 的新手,并尝试使用 ng-repeat 指令示例将数据绑定到 HTML 表格元素。 我的 js 文件位于脚本位置,其中有一个模块和控制器,其中一些数据附加到该控制器中的范围对象。

现在我想要的只是将该数据绑定到我的 HTML 表格元素并使用 ng-repeat 显示数据。我正在使用 ng-repeat 因为我有多行要显示在表格中。

这是我的角度代码:

`

/// <reference path="angular.min.js" />
/// <reference path="angular.js" />



var angularModule = angular.module("TestMyModule", []);
    angularModule.controller("MyController", function ($scope) {
    var employee  = [
                    {FirstName: "GGG",LastName: "SSS",MiddleName:"G"},
                    {FirstName: "G",LastName: "S",MiddleName: "GG"},
                    {FirstName: "GGS",LastName: "GSS",MiddleName: "GS"},
                    {FirstName: "Go",LastName: "Sa",MiddleName: "Gu"},
                    {FirstName: "Goo",LastName: "SAA",MiddleName: "Gu"}
    ];
    debugger;
    $scope.employee = employee;

});

`

以下是我的 HTML 代码

<!DOCTYPE html>
<html ng-app="angularModule">
<head>
    <title>AngularJS Example</title>
    <script src="Scripts/AngularExample.js"></script>
    <script src="Scripts/angular.min.js"></script>

</head>
<body >
        <table ng-controller="MyController">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Middle Name</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employees in employee">
                    <td>{{employees.FirstName}}</td>
                    <td>{{employees.LastName}}</td>
                    <td>{{employees.MiddleName}}</td>
                </tr>
            </tbody>
        </table>
</body>
</html>

以下是我得到的输出:

 First Name                 Last Name            Middle Name

{{employees.FirstName}} {{employees.LastName}} {{employees.MiddleName}}

使用浏览器调试工具,我发现以下错误,但不知道如何解决:

AngularExample.js:6 Uncaught ReferenceError: angular is not defined
angular.js:4631 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=angularModule&p1=Er…20c%20(http%3A%2F%2Flocalhost%3A2785%2FScripts%2Fangular.min.js%3A20%3A359)
firebug-lite.js:11883 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
firebug-lite.js:30905 Uncaught TypeError: Cannot read property 'push' of undefined

有人可以帮帮我吗?

【问题讨论】:

  • ng-app 应该是TestMyModule

标签: angularjs


【解决方案1】:

更改文件的加载顺序,Angular 应该在 AngularExample.js 之前加载,以便首先加载可用的库 API。

<script src="Scripts/angular.min.js"></script>
<script src="Scripts/AngularExample.js"></script>

ng-app 应该是 ng-app="TestMyModule",这是 Angular 模块名称。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-10-31
  • 1970-01-01
  • 1970-01-01
  • 2017-11-01
  • 1970-01-01
相关资源
最近更新 更多