在 AngularJS 中单击的项目上显示内容答案

【问题标题】：Showing content on item clicked in AngularJS在 AngularJS 中单击的项目上显示内容
【发布时间】：2015-07-23 19:28:41
【问题描述】：

我有一个 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 后我希望拥有的东西：

【问题讨论】：

你有什么尝试吗？
我的解决方案只切换/隐藏所有内容

标签： css angularjs html twitter-bootstrap

【解决方案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 数组的样子，也没有提供它的初始化位置。

【讨论】：

【解决方案2】：

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

在 html 中使用这个 ng-show=show 你想在点击时隐藏和显示。然后在需要时使用 ng-click="show=!show" 切换它

在这里你可以找到文档

【讨论】：