使用 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-click 和 ng-show 以及变量“showArticle”来切换文章详细信息的可见性。如果showArticle ===文章标题的id，显示文章的详细信息。

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

谢谢，

凯文，

Answer 1

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

并将其添加到输出。

Use ng-click to show the right article using ng-show and ng-repeat