Angular JS Router 和 ng-repeat 绑定到 $http

Question

我正在使用 angular 路由器创建一个 SPA，它根据用户偏好从外部数据库检索数据，然后在 table 中显示数据。这是我的设置

路由器：

App.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl : 'pages/home.php',
                controller  : 'mainCtrl'
            })
            .when('/territoryprint', {
                templateUrl : 'pages/print.php',
                controller  : 'mainCtrl'
            })
            .when('/territorymap', {
                templateUrl : 'pages/map.php',
                controller  : 'mainCtrl'
            });
    });

接下来我通过使用 $http

的服务填充一个数组

fusiotablesService.getRecords($scope.tablenumber).then(
            function(success){
                for(var i=0;i<success.data.rows.length;i++){
                    var obj= {
                        f1: success.data.rows[i][0],
                        f2: success.data.rows[i][2],
                        f3: success.data.rows[i][3],
                        f4: success.data.rows[i][6]
                    };
                    $scope.Records.push(obj);
                }
                $scope.$apply();
            });       
   }

在 pages/print.php 中，我设置了以下内容：

    <table class="table table-striped">
    <thead>
      <tr class="text-center">
        <th>Territory #</th>
        <th>Bell Code</th>
        <th>Full Address</th>
        <th>{{ Records.length }}</th>
      </tr>
    </thead>
    <tbody>
     <tr ng-model="Records" ng-repeat="t in Records">
        <td>{{ t.f1}}</td>
        <td>{{ t.f2 }}</td>
        <td>{}</td>
        <td>{}</td>
      </tr>
    </tbody>
  </table>

但是 ng-repeat 没有创建任何 <td> 元素并且 Records.length 是 0。

为什么 ng-repeat 没有绑定到 Records？我的方法错了吗？预先感谢您的帮助！

编辑这是 console.log 的 $scope.Records

这里是完整的控制器

jwteApp.controller("mainCtrl",function($scope,$location,fusiotablesService,NgMap){
        /*====== INDEX ======*/    
       $scope.territoryRecords=[];
        $scope.territories=[];
        $scope.selectedterr=-1;
        $scope.selectedoption="SELECT OPTION";
        fusiotablesService.getTerritories().then(function(success){        
            for(var i=0;i<success.data.rows.length;i++){
                $scope.territories.push(success.data.rows[i][0]);
            }
            },function(error){
                console.log(error.data);
            });

       $scope.indexFormClick = function(){
           var path="";
           if($scope.selectedoption=="SELECT OPTION"){           
                alert("Please select an option");
           }
           else if($scope.selectedterr==-1){
               alert("Please select a territory");
           }
           else{
                switch($scope.selectedoption){
                    case "print" :
                    populateRecords();
                    path = "/territoryprint";
                    break;
                    case "map":
                    path = "/territorymap";
                    break;
                    default:
                    alert("Please select an option");
                }            
                $location.path(path);           
           }
       }

       /*====== TERRITORY PRINT ======*/
       function populateRecords(){
            fusiotablesService.getTerritoryRecords($scope.selectedterr).then(
                function(success){
                    for(var i=0;i<success.data.rows.length;i++){
                        var terRecObj = {
                            number : success.data.rows[i][0],
                            address : success.data.rows[i][2],
                            bellcode : success.data.rows[i][3],
                            notes : success.data.rows[i][6]
                        };
                        $scope.territoryRecords.push(terRecObj);
                    }
                    $scope.$apply();
                    console.log($scope.territoryRecords);
                },
                function(error){
                    console.log(error.data);
                }
            );       
       }

    });

Answer 1

这是一些工作示例（没有调用任何远程 api）- jsfiddle.

在你的控制器中，你正在做类似的事情：

$scope.Records = []; // initialization
var obj = {
    f1: 'some territory',
    f2: 'some bell code',
    f3: 'some full address',
    f4: 'some number'
};
$scope.Records.push(obj);

而且，如果我是对的，你错过了 $scope.Records 数组的初始化（见上文）。

此外，您不需要在调用 push 之后立即调用 $scope.$apply。

编辑：

看起来原因是 - 你打电话给你的 API 然后你马上打电话给 $location.path(path);。这意味着您的路由将更改位置 并且您的控制器将被重新创建 。因此，您的数组将再次为空（与任何 API 调用之前一样）。

Angular JS Router 和 ng-repeat 绑定到 $http

Angular JS Router and ng-repeat bound to $http

javascript

angularjs

angularjs-ng-route