Javascript 在范围中更新ng重复循环数组后，视图未更新

我正在尝试创建一个表，其中列名称和记录分别位于“headers”和“records”数组中

<table class="table table-striped" id="dataset">
       <thead>
            <tr>
                <th>#</th>
                <th ng-repeat="header in headers">{{ header }}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="record in records.slice(1,11)">
                <td>{{$index + 1}}</td>
                <td ng-repeat="cell in record">{{cell}}</td>
            </tr>
        </tbody>
 </table>

但是这些元素不是在视图中创建的。在console>elements中，ng repeat指令显示为注释

<table class="table table-striped" id="dataset">
       <thead>
            <tr>
                <th>#</th>
                <!-- ngRepeat: header in headers -->
            </tr>
        </thead>
        <tbody>
            <!-- ngRepeat: record in records.slice(1,11) -->
        </tbody>
</table>

#

我做错了什么

以下是完整的脚本：

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

    VizApp.config(function($routeProvider){

        $routeProvider
            .when('/overview',{
                    controller : 'VizController',
                    templateUrl : 'views/overview.html'
            })
            .when('/options', {
                controller : 'VizController',
                templateUrl : 'views/options.html'
            })
            .when('/charts', {
                controller : 'VizController',
                templateUrl : 'views/charts.html'
            })
            .otherwise({redirectTo : '/overview'})
    });

    var controllers = {};
    controllers.VizController = function($scope){

        var headers = [];
        var records = [];

        var csvPath;
        var cgiPath = '/cgi-bin/cgiTest.py';

        $scope.getCsv = function(selection){
            //Triggered when the user choses a csv from a file input

            csvPath = 'csvs/' + selection[0].files[0].name;
            $.ajax({
                type: "GET",
                url: csvPath,
                dataType: "text",       
                success: function(data) {
                    processData(data);
                }
            });
        };

        function processData(allText) {

            var allTextLines = allText.split(/\r\n|\n/);
            headers = allTextLines[0].split(',');  

            $.each(allTextLines.slice(1,allTextLines.length), function(i,thisRecord){
                records[i] = thisRecord.split(',');
            });

            console.log("Comes here");
            $scope.headers = headers;
            $scope.records = records; 
            //If I do a $scope.headers = ['a','b'] here, I still don't see two columns made with headers a and b

        }
        //If I do a $scope.headers = ['a','b'] here, I see two columns made with headers a and b
    };

    VizApp.controller(controllers);

</script>

var-VizApp=angular.module（'VizApp'，[]）；
VizApp.config（函数（$routeProvider）{
$routeProvider
。当（“/overview”{
控制器：“VizController”，
templateUrl:'views/overview.html'
})
.when（“/options”{
控制器：“VizController”，
templateUrl:'views/options.html'
})
。当（“/charts”{
控制器：“VizController”，
templateUrl:'views/charts.html'
})
。否则（{重定向到：'/overview'}）
});
变量控制器={}；
controllers.VizController=函数（$scope）{
var头=[]；
var记录=[]；
var-csvPath；
var cgiPath='/cgi-bin/cgiTest.py'；
$scope.getCsv=函数（选择）{
//当用户从文件输入中选择csv时触发
csvPath='csvs/'+选择[0]。文件[0]。名称；
$.ajax({
键入：“获取”，
网址：csvPath，
数据类型：“文本”，
成功：功能（数据）{
过程数据（数据）；
}
});
};
函数processData（allText）{
var allTextLines=allText.split（/\r\n |\n/）；
headers=allTextLines[0]。拆分（'，'）；
$.each（allTextLines.slice（1，allTextLines.length），函数（i，thisRecord）{
记录[i]=thisRecord.split（'，'）；
});
log（“来到这里”）；
$scope.headers=标题；
$scope.records=记录；
//如果我在这里使用$scope.headers=['a'，'b']，我仍然看不到两个包含头a和头b的列
}
//如果我在这里执行$scope.headers=['a'，'b']，我会看到两列由标题a和b组成
};
VizApp.控制器（控制器）；

---

谢谢。

您需要将更新范围的代码包装在

$scope.$apply（）

中，如下所示：

$scope.$apply(function(){
       $scope.headers = headers;
       $scope.records = records; 
});

您需要这样做，因为您要更新异步回调中的作用域，该回调在不同的javascript中运行，angularjs不知道。查看更多信息

另一种方法是使用angularjs

$http

服务。在这种情况下，您不需要将范围更新包装在

$scope.$apply

中，因为angularjs会为您进行更新

controllers.VizController = function($scope, $http){

        var headers = [];
        var varType = [];
        var records = [];
        var parameters = { 'xAxisVar' : '', 'yAxisVar' : '', 'sliceByVar' : '',    'chartByVar' : '', 'groups' : '', 'slices' : ''};

        var csvPath;
        var cgiPath = '/cgi-bin/cgiTest.py';


        $scope.getCsv = function(selection){
            //Triggered when the user choses a csv from a file input

            csvPath = 'csvs/' + selection[0].files[0].name;
            $http({method: 'GET', url: csvPath}).
            success(function(data, status, headers, config) {
                 processData(data);
            }).
            error(function(data, status, headers, config) {
            });
        };

        function processData(allText) {

            var allTextLines = allText.split(/\r\n|\n/);
            headers = allTextLines[0].split(',');  

            $.each(allTextLines.slice(1,allTextLines.length), function(i,thisRecord){
                records[i] = thisRecord.split(',');
            });

            $scope.headers = headers;
            $scope.records = records; 


        }
    };

---

请给你的脚本添加完整的脚本！尝试将$scope.headers=[]更改为$scope.allheaders={}；然后=>$scope.allheaders.headers=[]；我的意思是把你的数组放在一个对象里，但它不起作用。谢谢你。用下面的答案解决了这个问题。

controllers.VizController = function($scope, $http){

        var headers = [];
        var varType = [];
        var records = [];
        var parameters = { 'xAxisVar' : '', 'yAxisVar' : '', 'sliceByVar' : '',    'chartByVar' : '', 'groups' : '', 'slices' : ''};

        var csvPath;
        var cgiPath = '/cgi-bin/cgiTest.py';


        $scope.getCsv = function(selection){
            //Triggered when the user choses a csv from a file input

            csvPath = 'csvs/' + selection[0].files[0].name;
            $http({method: 'GET', url: csvPath}).
            success(function(data, status, headers, config) {
                 processData(data);
            }).
            error(function(data, status, headers, config) {
            });
        };

        function processData(allText) {

            var allTextLines = allText.split(/\r\n|\n/);
            headers = allTextLines[0].split(',');  

            $.each(allTextLines.slice(1,allTextLines.length), function(i,thisRecord){
                records[i] = thisRecord.split(',');
            });

            $scope.headers = headers;
            $scope.records = records; 


        }
    };