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

【问题标题】：Use ng-click to show the right article using ng-show and ng-repeat使用 ng-click 显示正确的文章使用 ng-show 和 ng-repeat
【发布时间】：2015-02-17 02:14:25
【问题描述】：

同一控制器会发生以下情况。

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

文章标题由 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，则显示文章详情。

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

谢谢，

凯文，

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-click angularjs-ng-show

【解决方案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;
}

并将其添加到输出。

【讨论】：