Javascript 在AngularJS中访问动态元素id

我正在使用一个具有ng repeat的应用程序，该应用程序使用Mongo DB中的项目列表填充导航侧栏。ng repeat还为每个项目填充一系列选项按钮。对于ng repeat中的每个迭代，两个选项按钮共享一个动态id。这里应该发生的是，当我单击其中一个按钮时，它会更改按钮“文本”，并在菜单项下显示一些附加选项，再次单击时会切换回原来的状态

以下是这些按钮的代码：

<span>
    <button ng-hide="highlightItem()" ng-click="showTopic()" ng-attr-id="{{ 'category' + subject._id }}" class="add-button"><i class="fa fa-chevron-down"></i></button>
    <button ng-click="hideTopic()" ng-show="highlightItem()" ng-attr-id="{{ 'category' + subject._id }}" class="add-button"><i class="fa fa-chevron-up"></i></button>           
</span>

我也试过了

var topicButton = document.getElementById('topic' + $scope.subject._id);

在Angular/Javascript中访问动态id的最佳方式是什么？如果可能的话，我不想将jQuery与此结合使用。

首先，不要在角度控制器中操作DOM！这是坏习惯。此外，在ngShow/ngHide中评估方法也是不好的做法

如果我没弄错的话，当点击按钮时，您出于某种原因试图获取主题id。为什么不能将id或整个主题传递回方法？然后，您的html将如下所示：

<span>
  <button ngClick="toggleTopic(subject)" class="add-button">
    <i class="fa" ng-class="{'fa-caret-down': subject.hidden, 'fa-caret-up': !subject.hidden}"></i>
  </button>
</span>

$scope.toggleTopic = function(subject) {
  subject.hidden = !subject.hidden;
};

使用主题的隐藏属性，您现在可以使用ngShow/ngHide显示或隐藏下拉列表中的元素，如下所示：

---

通过这种方式，您根本不必在DOM中搜索元素。

您可能需要它们共享一个模型—您正在以一种非常非角度的方式进行此操作。与其搜索元素，我只需将对象或id传入showTopic或highlightItem方法，并使用该id进行操作。但是，我可以通过getElementById获取元素-在html中，您将“category”设置为前缀，调用时将“topic”设置为前缀，这显然行不通。这看起来是我需要的。我会玩它，看看我是否能让它工作。在对我的代码进行了更多的评估之后，看起来我实际上不需要获取主题id，所以我能够通过ng click=toggle=实现这一点！toggle ngclass={'fa-caret-down'：！toggle'fa-caret-up'：toggle}。谢谢你的意见，迈克！更简单！虽然我个人认为DOM中的赋值逻辑是不好的实践，但在DOM中分配视图相关变量与提高控制器逻辑的权重之间的权衡肯定是有问题的。这似乎是与列表相关的折叠指令的一个很好的用例。

$scope.toggleTopic = function(subject) {
  subject.hidden = !subject.hidden;
};

<p ng-bind="subject.descripton" ng-hide="subject.hidden"></p>