Angular.js中Highchart点击事件触发后表格数据未更新问题

1 修复HTML模板变量名错误 #

你的ng-repeat指令中变量名书写错误，多了空格，导致无法正确绑定appList变量：

<!-- 错误写法 -->
<tr ng-repeat="a in app List">{{a}}</tr>
<!-- 正确写法 -->
<tr ng-repeat="a in appList">{{a}}</tr>

2 修复Angular脏检查未触发问题 #

Highchart的点击事件回调是在Angular上下文之外执行的，直接修改$scope变量不会触发视图更新，需要手动触发脏检查，两种修改方案二选一即可：

方案一：在displayAppInfo函数末尾添加$scope.$apply() #

$scope.displayAppInfo = function (input) {
    $scope.appStatusName = '';
    if(input == 'Unable to Complete'){
        $scope.appList = /* 你过滤后的5条结果数组 */;
    }else if(input == 'Pending'){
        $scope.appList = /* 你过滤后的4条结果数组 */;
    }else if(input == 'Completed'){
        $scope.appList = /* 你过滤后的2条结果数组 */;
    }else if(input == 'Inprogress'){ // 统一为和传入参数一致的无空格写法
        $scope.appList = /* 你过滤后的3条结果数组 */;
    }else if(input == 'All'){
        $scope.appList = /* 你全量14条结果数组 */;
        $scope.appStatusName = 'All';
    }
    // 新增这行手动触发视图更新
    $scope.$apply();
}

方案二：在Highchart点击事件中调用时包裹$apply #

click: function (event) {
    $scope.$apply(() => {
        switch (event.point.category) {
            case 'Inprogress':
                $scope.displayAppInfo('Inprogress');
                break;
            case 'Completed':
                $scope.displayAppInfo('Completed');
                break;
            case 'Pending':
                $scope.displayAppInfo('Pending');
                break;
            case 'Unable to Complete':
                $scope.displayAppInfo('Unable to Complete');
                break;  
            case 'All':
                $scope.displayAppInfo('All');
                break;
        }
    })
}

3 统一状态字符串写法 #

当前代码中Highchart点击事件传入的状态是Inprogress（无空格），但displayAppInfo中判断的是In progress（带空格），会导致该状态下筛选失效，建议两边统一使用相同的字符串。

内容的提问来源于stack exchange，提问作者sm_dev2