ng-show 和 get element by id 在 ng-repeat 表中都不起作用

Question

我正在尝试使用document.getElementById在Angular中也很容易ng-show.js

我有表格，其中每行动态填充三个按钮，当我单击选择按钮时，它会显示该行隐藏的剩余两个按钮。

<td>
   <a ng-click="vm.Select(Survey.Id)" title="{{ 'Select' | translate }}">
   <i"><i class="fa fa-edit fa-1x"></i>
   <i></a>
</td>                     
<td id=id="{{Survey.Id}}" style="visibility:hidden" >hidden">
   <a ng-click="vm.Update(Survey.Id)" title="{{ 'Update Visit' | translate }}">
   <i"><i class="fa fa-save fa-1x"></i>
    <i></a>
 </td>
 <td id=id="{{Survey.Id}} ng-show="updateicon" >">
    <a ng-click="vm.AddTask(Survey.Id)" title="{{ 'Add Task' | translate }}">
    <i"><i class="fa fa-plus fa-1x"></i>
    <i></a>
  </td>

在选择单击时：

vm.Select = function(value) {
  var test = value;
  $scope.updateicon = true;
  document.getElementById(value).style.visibility = "visible";
};

单击时，按 id 获取元素不显示任何按钮ng而显示所有行的按钮。

Answer 1

在使用AngularJS时，建议使用ng-show/hide。实际上ng-if甚至是一个更好的选择，因为它不会创建DOM元素，除非条件为真。

无论如何，在您的代码中，您将缺少函数调用中的括号：

<a ng-click="vm.Update({{Survey.Id}})" title="{{ 'Update Visit' | translate }}">

而不是

<a ng-click="vm.Update(Survey.Id)" title="{{ 'Update Visit' | translate }}">

希望这有帮助

Answer 2

建议使用 ng-show 或 ng-if 。绝对不建议在AngularJS中使用普通JavaScript document.getElementById()，因为它可能会导致不可预见的问题，因为JavaScript直接操纵DOM。

您会看到所有行的按钮，因为每一行都绑定到ng-show上的同一变量updateicon。您将需要某种唯一 ID 来访问 surveys 数组中的每个元素。您可以使用$index或survey.id(如果它对每行都是唯一的(来执行此操作。

<tr ng-repeat="survey in surveys track by $index">
  // Insert cells here
  <td>
    <a ng-click="vm.Select($index)" title="{{ 'Select' | translate }}"><i class="fa fa-edit fa-1x"></i></a>
  </td>
  <td id="{{Survey.Id}}" ng-show="canModify[$index]">
    <a title="{{ 'Update Visit' | translate }}"><i class="fa fa-save fa-1x"></i></a>
  </td>
  <td id="{{Survey.Id}}" ng-show="canModify[$index]">
    <a title="{{ 'Add Task' | translate }}"><i class="fa fa-plus fa-1x"></i></a>
  </td>
</tr>

vm.Select = function(index) {
  $scope.canModify[index] = true;
};

如果您想使用 survey.id 而不是 $index ，只需将 HTML 中的$index替换为 survey.id 即可。