Question

我使用角度路由器创建SPA，该SPA根据用户首选项从外部数据库检索数据，而不是在表中显示数据。这是我设置的

路由器：

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？我的方法有误吗？提前感谢您的帮助！

修改这是$ scope.Records的console.log

这是完整的控制器

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数组的初始化（见上文）。

此外，您无需在致电$scope.$apply后立即致电push。

修改

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

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

1 个答案: