Question

我正在使用一个具有ng-repeat的应用，该应用会使用Mongo数据库中的项目列表填充导航侧边栏。 ng-repeat还为每个项目填充一系列选项按钮。其中一些选项按钮共享ng-repeat中每次迭代的动态ID。这里应该发生的是当我点击其中一个按钮时，它会改变按钮＆＃39; text＆＃39;并在菜单项下显示一些其他选项，并在再次单击时切换回来。

以下是我的代码：

<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>

我遇到的问题是我似乎无法弄清楚如何在我的控制器中访问该动态ID。我有代码可以更改ng-show和ng-hide之间的按钮，但它可以用于ng-repeat的所有迭代。

这是我目前试图访问动态ID的方式。我没有收到任何错误，但是当我尝试在我的函数中使用它时，它无法正常工作。

$scope.subjectList = subjects.get({});
var topicButton = document.getElementById('topic' + $scope.subjectList._id);

我也试过

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

在Angular / Javascript中访问动态ID的最佳方法是什么？如果可能的话，我不想使用jQuery。

Answer 1

首先，永远不会在角度控制器中操纵DOM！这是不好的做法。此外，评估ngShow / ngHide中的方法是不好的做法。

如果我理解正确，那么当您点击按钮时，您会出于某种原因尝试获取subject_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;
};

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

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

这样，您根本不必在DOM中搜索元素。

访问AngularJS中的动态元素ID

1 个答案: