javascript - 在 angularJS 中使用 html ID

Question

我有四个使用 ng-repeat 填充数据的表，我有一些验证根据单选按钮选择显示一个表或另一个表。

我在名为“fixtable”的表中调用一个 CSS id。问题是，如果我删除它工作的任何表的 ng-if，标题是固定的，但我需要这些验证来显示或隐藏表。

看起来 angular 不识别“id”属性或者我不知道。

对此有任何帮助，我很着急。

<div  ng-if="topTable.value === 'topCategory'" ng-show="loadViewCategories">
  <table class="table" id="fixTable">
      some code
  </table>

<div  ng-if="topTable.value === 'topBrand'" ng-show="loadViewBrand">
  <table class="table" id="fixTable2">
      some code
  </table>

在 HTML 中，我调用我的函数来制作这样的 fiexd header

<script>
 $(document).ready(function() {
    $("#fixTable").tableHeadFixer();
    $("#fixTable2").tableHeadFixer();
    $("#fixTable3").tableHeadFixer();
    $("#fixTable4").tableHeadFixer();
 });
</script>

我有一些 CSS 可以让我的表格一直向右滚动

    #fixTable {
    width: 2700px !important;
}
#fixTable2 {
    width: 2700px !important;
}
#fixTable3 {
    width: 2700px !important;
}
#fixTable4 {
    width: 2700px !important;
}

Answer 1

这是因为 ng-if="topTable.value === 'topCategory'" 从 DOM 中删除你的表，所以当你调用 $("#ID").tableHeadFixer ();，它不适用于 DOM 中不存在的表。

您有两个解决方案:

1. 删除您的 ng-if，并改用 ng-show，因为 ng-show 将您的表格保留在 DOM 中，它只会使其不可见。请注意，这两个指令之间还有其他重要区别，您可以在 this thread 上了解更多信息
2. 每次更改 topTable.value 时，调用 tableHeadFixer() 使其工作