Angular未在表行中显示数据.ng重复不起作用


Angular is not displaying data in table row. ng-repeat is not working

我正在尝试使用Angularjs。问题是,当它在路线上时,ng重复不工作。当它不在路线上时,它会工作。

以下是我目前所掌握的:请参阅链接。。

这很有效。。。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;
    };

 }]);

这是我的版本

我同意imbalind提到的大多数观点。

只是想再添加一些:

  • 我们不应该多次实例化同一个应用程序(在最初的Plunker中,我们在index.html和list.html中都有它)

    var myApp = angular.module('myApp', ['ngRoute']); //new instance of 'myApp' 
    var myApp = angular.module('myApp'); //simply handle to 'myApp'
    
  • 我们有两个属于同一个angular.module'loglistController',它们不起的作用

  • angular本身在两个html文件中都加载了,不太好。

  • 对于特定的Plunker,app.js:中的固定路线

    .when('/', {
        templateUrl: '/index.html',
        controller: 'mainController'
    })
    
  • 请不要混淆jQuery脚本,它稍后会造成很多混乱。。。

这里有一个(有点)固定的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'替换它来解决问题。我确信这不是你想要的,但这是让它发挥作用所必需的。

您确定您的$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慢慢构建!

FYI。。。

你可以。。。

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

只有当HTTP请求解析时才有效!

附言,你那混蛋的表演都没有!