使用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，则显示文章详细信息。

然而，这不起作用，我做错了什么？

THX，

凯文，

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"。 （这是糟糕的风格，但仍然有效）

但是，这是不好的方法 - 你不需要第二次重复，只需使用object，而不是id：

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

并将其添加到输出中。