Angular 不在表格行中显示数据。 ng-repeat 不起作用答案

【问题标题】：Angular is not displaying data in table row. ng-repeat is not workingAngular 不在表格行中显示数据。 ng-repeat 不起作用
【发布时间】：2015-12-18 17:04:44
【问题描述】：

我正在尝试使用 Angularjs。问题是，ng-repeat 在路由中时不起作用。它在不在路线中时工作。

这是我目前所拥有的：查看链接..

这很好用... http://plnkr.co/edit/1syQFJdMyRUYncBrREue?p=preview

但在这方面，它现在不起作用..（在人中导航） http://plnkr.co/edit/gsi2mZpnU0YJUUOa20DO?p=preview

html

<html ng-app="myApp">
<head>
    <title>Confirm Dialog Box</title>
 <!-- 
    in the link above i create a custom dialog box
 -->
</head>
<body>

<div ng-controller="loglistController">
<table>
  <tr ng-repeat="x in names">
    <td onclick="showDialog()" ng-click="showInEdit(x)">{{ x.Name }}</td>
    <td onclick="showDialog()" ng-click="showInEdit(x)">{{ x.Country }}</td>
  </tr>
</table>


             <div id="white-background">
</div>
<div id="dlgbox">
    <div id="dlg-header"><h3>Information</h3></div>
    <div id="dlg-body">
      Name <input type="text" ng-model="selectedPerson.Name" /><br/>
      Country <input type="text" ng-model="selectedPerson.Country" /><br/>


    </div>
    <div id="dlg-footer">
        <button onclick="dlgOK()">Update</button>
        <button onclick="dlgCancel()">Exit</button>
    </div>
</div>

角度

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

myApp.controller('loglistController', ['$scope', '$http', function ($scope, $http) {

    $scope.data=[];
    $scope.selectedPerson={ Name:"",Country:""}; 

            $http.get("loglistajax.php")
                .then(function (response) {$scope.names = response.data.records;});

    $scope.showInEdit=function(person){
    $scope.selectedPerson = person;
    };



 }]);

【问题讨论】：

对于初学者，您已经在 app.js 和 list.html 中定义了 MyApp 和 loglistController 并将其从其中一个中移除，然后查看您的位置。我的建议是从 list.html 中删除它

标签： javascript php angularjs

【解决方案1】：

这是我的version

我同意imbalind提到的大多数points。

只是想补充一些：

我们不应该多次实例化同一个应用程序（在最初的 Plunker 中，我们在 index.html 和 list.html 中都有它）。这里有两种情况：
```
var myApp = angular.module('myApp', ['ngRoute']); //new instance of 'myApp' 

var myApp = angular.module('myApp'); //simply handle to 'myApp'
```
我们有两个 'loglistController' 属于同一个 angular.module，这不起作用
angular 本身在两个 html 文件中都加载了，不好。

对于特定的 Plunker，在 app.js 中固定路由：

.when('/', {
    templateUrl: '/index.html',
    controller: 'mainController'
})

请不要混淆 jQuery 脚本，以后会造成很多混乱...

【讨论】：

抱歉，代码有点乱。我最近才以凌乱的方式学习 angularjs 哈哈哈。实际上，我最近才学习编码。感谢您提供一些信息:)

【解决方案2】：

这是一个（有点）fixed plunker，但是我在您的代码中发现了以下问题：

您有两个控制器：loglistController 定义了两次，一次在 app.js 内，然后在 list.html 内再次定义。

你写了下面这行

<tr ng-repeat="x in data">

认为它会从loglistController 的$scope.data 读取，但您的应用似乎正在考虑第一个控制器，因此您的控制器范围没有数据属性。我解决了用list.html 内部的控制器替换app.js 中的控制器。

想一想，我猜你是不允许将路由控制器的代码放在它的模板中的，所以你以后最好避免这样做！
当 url 为 '/' 时，您的 app.js' templateUrl 不存在，这会引发错误。我通过用'list.html' 替换它来解决。我很确定这不是你想要的，但它是让它发挥作用的必要条件。

【讨论】：

抱歉，代码有点乱。我最近才以凌乱的方式学习 angularjs 哈哈哈。实际上，我最近才学习编码。现在对我来说很清楚了。这是非常详细的信息。它现在工作得很好。非常感谢！ :)

【解决方案3】：

您确定您的 $http 请求正在解析吗？

 $http.get("loglistajax.php").then(function (response) {
     $scope.names = response.data.records;
 }).catch(function(response) {
     console.log("I am failing to resolve a non-2xx response");
 });

最初尝试不使用 $http 请求，使用虚拟数据 n 慢慢建立！

仅供参考...

你可以...

$scope.names = $http.get("loglistajax.php");

仅当 HTTP 请求解析时才有效！

PS 你的 plunkr 都不显示任何东西！

【讨论】：