angularjs - 使用 ng-click 显示正确的文章使用 ng-show 和 ng-repeat

Question

以下情况发生在同一个控制器中。

我有一个页面显示文章标题列表。如果用户单击文章标题，弹出窗口将详细显示该文章。

文章标题由ng-repeat 生成。

<div class="adItem" ng-click="showArticle = tiki._id" ng-repeat="tiki in tikis track by tiki._id">

文章详细信息也由 ng-repeat 生成：

<article class="adArticle" ng-show="showArticle === tiki._id" ng-repeat="tiki in tikis track by tiki._id">

请注意，我使用ng-clickandng-show和变量 ' showArticle' 来切换文章详细信息的可见性。如果 showArticle === 文章标题的 id，则显示文章详细信息。

但是，这不起作用，我做错了什么？

谢谢，

凯文，

score 2 · Accepted Answer

Ng-repeat 为每个重复元素创建范围，例如：

contoller-scope
child scope1
child scope2

showArticle = tiki._id设置子范围的变量，而不是控制器范围的。这就是为什么你不能解决它。

您应该将其投入使用： ng-click="setSelected(tiki)"

$scope.setSelected = function(tiki) {
  $scope.showArticle = tiki._id;
}

然后这将起作用。

或者你可以ng-click="$parent.showArticle = tiki._id"。（这是不好的风格，但仍然有效）

然而，这是不好的方式——你不需要第二次重复，只使用对象，而不是 id：

$scope.setSelected = function(tiki) {
  $scope.showArticle = tiki;
}

并将其添加到输出。

angularjs - 使用 ng-click 显示正确的文章 使用 ng-show 和 ng-repeat