AngularJS中下拉选择后表格未同步显示作用域过滤数据的问题

看起来你遇到了两个核心问题：过滤逻辑的错误，以及jQuery DataTable无法自动响应Angular数据变化，这两个问题共同导致了页面没有更新。我来一步步帮你解决：

1. 修复控制器中的过滤逻辑错误 #

你当前的filter回调函数逻辑有问题：filter的回调应该返回布尔值（决定当前项是否保留），但你在else分支直接返回了$scope.originalQuizData，这会导致过滤结果不符合预期，甚至可能让quizdata变成错误的格式。

另外，建议在页面初始化时就备份原始数据（避免后续操作污染原始数据），然后在过滤时直接基于备份数据处理。

修正后的控制器代码：

// 页面初始化时先备份原始数据（放在控制器初始化的地方，比如$onInit或者控制器开头）
$scope.originalQuizData = angular.copy($scope.quizdata);

$scope.filterSyllabus = function () { 
    if ($scope.assessment.sellectedSyllabusName.length > 0) { 
        // 选中了特定大纲，过滤匹配的数据
        $scope.quizdata = $scope.originalQuizData.filter(item => {
            return item.syllabus_id === $scope.assessment.sellectedSyllabusName[0].id;
        });
    } else {
        // 没有选中大纲，恢复显示所有原始数据
        $scope.quizdata = angular.copy($scope.originalQuizData);
    }
    // 触发DataTable刷新
    $scope.refreshDataTable();
}

2. 解决jQuery DataTable不更新的问题 #

你用的是jQuery DataTable插件，它是基于DOM初始化的，不会自动感知AngularJS作用域的数据变化。所以即使$scope.quizdata更新了，DataTable也不会重新渲染，需要手动销毁并重新初始化。

先在控制器中添加刷新DataTable的函数（记得注入$timeout服务）：

// 注入$timeout到控制器参数中，比如：app.controller('YourCtrl', ['$scope', '$timeout', function($scope, $timeout) { ... }])
$scope.refreshDataTable = function() {
    // 获取已初始化的DataTable实例
    var dataTable = $('.datatable').DataTable();
    // 销毁现有实例
    dataTable.destroy();
    // 用$timeout确保Angular已经完成DOM更新后，再重新初始化DataTable
    $timeout(function() {
        $('.datatable').DataTable($scope.dataTableOpt);
    }, 0);
}

3. 修复HTML中的DOM结构错误 #

你的HTML里有一个多余的</td>标签，这会导致DOM结构异常，可能影响渲染：

<!-- 修正前 -->
<tr ng-if="n.id!=1" ng-repeat="n in quizdata">
    <td class="rowquiz">{{$index+1}}</td>
    <td class="rowquiz">{{ n.syllabus_id }}</td>
    </td> <!-- 多余的标签，要删除 -->
</tr>

<!-- 修正后 -->
<tr ng-if="n.id!=1" ng-repeat="n in quizdata">
    <td class="rowquiz">{{$index+1}}</td>
    <td class="rowquiz">{{ n.syllabus_id }}</td>
</tr>

为什么之前的代码没生效？ #

• 过滤逻辑错误导致$scope.quizdata没有被正确赋值为过滤后的数组；
• DataTable初始化后不会监听Angular的作用域变化，必须手动刷新才能同步新数据。

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