Question

我是AngularJS的新手，我试图在ng-repeat中设计一行每行3个元素。当用户点击其中一个行元素时，在其下方会显示另一行，具体取决于我所使用的ng-show。我将每一行分成不同的对象，并将节目放在线之间。我的问题是，我可以单击其中一行并隐藏可能已在另一行中单击的行吗？

我的思维过程是点击所选内容并显示所选信息。同一行上的任何东西都是寒冷的，因为它们都将绑定到该行的相同ng-show。但是，当我单击一行中的1个元素，然后单击第二行中的另一个元素时，问题就出现了。两个div都显示，但我只喜欢我点击显示的那个。

有什么想法？我已经完成了hella的工作，并且在某些方面已经接近了，但不完全是我一直在寻找的UX。谢谢，抱歉做个菜鸟。在没有人有经验的公司，我很高兴能来这里寻求帮助。

<div ng-controller="oneCtrl">
    <div class="row">
        <div ng-repeat="image in images" class="span4 padding-bottom30">
            <a href rollover ng-click="select(image)">
                <img class="img-responsive padding-top30" ng-src={{image.img}}/>
            </a>
        </div>
    </div>
    <div ng-show=selected>
        <div class="row">
            <div class="span4 padding-top30">
                <h3 class="mont margin-top0">{{selected.name}}</h3>
                <p><b>Mission Statement</b></p>
                <p>{{selected.info}}</p>
                <a href={{selected.site}}><button class="btn btn-colour-red pull-left">VISIT SITE</button></a>
            </div>
            <div class="span8 padding-top30">
                <img class="img-responsive" ng-src={{selected.photo}}/>
            </div>
        </div>
    </div>
    <div class="row">
        <div ng-repeat="pics in images" class="span4 padding-bottom30">
            <a href ng-click="select(pics)">
                <img class="img-responsive padding-top30" ng-src={{pics.img}}/>
            </a>
        </div>
    </div>
    <div ng-show=selected>
        <div class="row">
            <div class="span4 padding-top30">
                <h3 class="mont margin-top0">{{selected.name}}</h3>
                <p><b>Mission Statement</b></p>
                <p>{{selected.info}}</p>
                <a href={{selected.site}}><button class="btn btn-colour-red pull-left">VISIT SITE</button></a>
            </div>
            <div class="span8 padding-top30">
                <img class="img-responsive" ng-src={{selected.photo}}/>
            </div>
        </div>
    </div>
</div>

Answer 1

您在该部分的DIV中使用ng-show="selected"。它是一个变量，因此在您单击图像时控制隐藏或显示这些部分。这就是它一直显示两个DIV的原因。要解决此问题，您需要使用两个变量，可以是selected1和selected2，并根据您单击的图像（第1行或第2行）控制它。

选中plunker。

我希望这会有所帮助。

单击ng-repeat中的项目以显示和隐藏某个div

1 个答案: