显示AngularJS中单击项目的内容

Question

我有一个ng-repeat，其中有两对。我的目的是在第一行被点击后显示第二行。

<div class="row myClass"
    ng-repeat="sth in sths"
    ng-class="{ cssSthEven: (($index%2) == 0), cssSthOdd: ($index%2)}">
    <div class="row">
        {{sth.name}} {{sth.surname}}
    </div>
    <div class"row">
        {{sth.content}}
    </div>
</div>

我有什么：

点击John Smith后我希望得到的内容：

Answer 1

以下是一些有趣的angularJS文档，可以作为您示例的良好实践。

使用ng-repeat，奇数和偶数通常是您可以使用的东西，因此指令ng-class-odd="'odd'"和ng-class-even="'even'"可用于ng-repeat表达式

查看https://docs.angularjs.org/api/ng/directive/ngClassOdd

对于有条件的可见性更改，指令ng-show存在https://docs.angularjs.org/api/ng/directive/ngShow

可能的解决方案

<div class="row myClass"
    ng-repeat="sth in sths"
    ng-class-even="'cssSthEven'" ng-class-odd="'cssSthOdd'">
    <div class="row" ng-click="clicked($index)">
        {{sth.name}} {{sth.surname}}
    </div>
    <div class"row" ng-show="sth.isVisiblie">
       {{sth.content}}
    </div>
</div>

在您的控制器中

$scope.clicked = function(index){
    $scope.sths[index].isVisiblie = true;
}

最后一个函数是猜测的，因为你没有提供你的sths数组的样子，也没有提供它的初始化。

Answer 2

对要显示的项目使用ng-show和ng-hide指令， 这是怎么回事 在您的控制器中将变量设置为false，单击时您将使其成立。  $ scope.show = false;

使用此ng-show = show在html中你想要隐藏并在点击时显示。 然后使用ng-click =“show =！show”在需要时切换它

在这里你可以找到文档