jquery - 如何在angularjs中更新html表的数据？

Question

我有这张 table ；

     <table class="table table-striped table-bordered table-responsive" ng-show="viewBusinessUnits">
      <thead>
        <tr>
          <th>Business Unit</th>
          <th><input type="checkbox" ng-model="businessUnitSales">Sales</input></th>
          <th><input type="checkbox" ng-model="businessUnitPercentageLY">Percentage Last Year</input></th>
          <th><input type="checkbox" ng-model="businessUnitWTD">WTD Percentage Last Year</input></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in tableData">
          <td><a href="#" ng-click="toggleTable(row.name)">{{row.name}}</a></td><!---->
          <td>{{row.Actual}}</td>
          <td>{{row.Budget}}</td>
          <td>{{row.BudgetVar}}</td>
        </tr>
      </tbody>
    <table>

在页面加载时使用正确的数据和所有内容绘制，但我已经在 Controller 中声明了流程图的点击监听器，我想用它来更改表中显示的数据，具体取决于哪个单击图表上的条/点；

    $("#graph_canvas").bind("plotclick", function (event, pos, item) {

      if(item){
        switch(item.series.data[item.dataIndex][0]){
          case 'airtime':
            $scope.tableData = $scope.airtimeData;
            break;

          case 'clothing':
            $scope.tableData = $scope.clothing;
            break;

          case 'foods':
            $scope.tableData = $scope.foods;
            break;
        }

        alert("1st item: " + $scope.tableData[0].name);
      }
    });

现在，plotclick 监听器末尾的警报告诉我，$scope.tableData 确实已更新，但 html 表中显示的数据保持不变,通常在 AngularJS 中，通过向选择元素中使用的数组添加一行，选择元素会立即使用额外的选项进行更新，为什么当我替换整个表格时它不起作用，这是一种解释或一种方法更改数据后重新渲染表格？

Answer 1

Angular 不知道 click 内发生的模型更新。使用$apply:

$("#graph_canvas").bind("plotclick", function (event, pos, item) {
    $scope.$apply(function(){
        if(item){
            switch(item.series.data[item.dataIndex][0]){
                case 'airtime':
                    $scope.tableData = $scope.airtimeData;
                    break;
                case 'clothing':
                    $scope.tableData = $scope.clothing;
                    break;
                case 'foods':
                    $scope.tableData = $scope.foods;
                    break;
            }
            alert("1st item: " + $scope.tableData[0].name);
        }
    });
});