下拉菜单上仅第一个按钮展开

Question

我刚开始使用javascript / angular和html，正在制作一个表格，我想在表格中添加下拉菜单，以扩展到更大的描述。 我添加了一个表，并使用“ ng-repeat”来填充表。 我还添加了可以折叠和展开的按钮，但是当我单击任何一个按钮时，只有第一个按钮会展开。 因此，即使单击第二，第三等，它也只会打开第一个下拉菜单。

如何使相应的按钮展开正确的说明？ 我不确定是否是“ ng-repeat”导致其无法正常工作。 我认为这可能与按钮的ID有关。 那么，有没有一种方法可以给每个人一个唯一的ID，或者完全摆脱它，以便正确的按钮可以打开正确的描述？

这是代码：

            <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Gender</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees| filter:searchText" >
                    <td>{{employee.Name}}</td>
                    <td>{{employee.Last}}</td>
                    <td>
                        <div class="FAQ">
                            <a href="#hide1" class="hide" id="hide1">+</a>
                            <a href="#show1" class="show" id="show1">-</a>
                            <div class="question"> {{employee.Gender}} </div>
                            <div class="list">
                                <p>THIS IS A DESCRIPTION </p>
                                <p>MORE DESCRIPTION</p>
                            </div>
                        </div>

                    </td>
                </tr>
            </tbody>
        </table>

这是CSS样式表：

/*stuff for button press description*/
.FAQ { 
    vertical-align: top; 
    height:auto !important; 
}
.list {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}
.hide, .show {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 0 #666;
    text-align: center;
    text-decoration: none;
    box-shadow: 1px 1px 2px #000;
    background: #cccbbb;
    opacity: .95;
    margin-right: 0;
    float: left;
    margin-bottom: 25px;
}

.hide:hover, .show:hover {
    color: #eee;
    text-shadow: 0 0 1px #666;
    text-decoration: none;
    box-shadow: 0 0 4px #222 inset;
    opacity: 1;
    margin-bottom: 25px;
}

.list p{
    height:auto;
    margin:0;
}
.question {
    float: left;
    height: auto;
    width: 90%;
    line-height: 20px;
    padding-left: 20px;
    margin-bottom: 25px;
    font-size: 200%;
}

button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}

Answer 1

当您使用ng-repeat您应该可以在重复块中访问$index变量，该变量可用于在代码中分配特定的ID。 因此，您可以设置id='hide-{{$index}} 。

您可以做的另一件事是切换与模型关联的布尔值，然后执行

ng-show='employee.ShowDetails'

用

ng-click='employee.ShowDetails = !employee.ShowDetails'

Answer 2

ng中继器正在创建具有相同类的多个div，并且CSS所针对的URI没有区别。 单击href时，css模式：

.hide:target ~ .list {
    display:inline; 
}

...针对的是带有URI的“列表”类的div。 可以匹配转发器中输出的DOM中的div数量，因为所有重复元素的URI都是相同的，因此使用第一个。

在中继器中：

 <a href="#hide{{$index}}" class="hide" id="hide{{$index}}">+</a>
 <a href="#show{{$index}}" class="show" id="show{{$index}}">-</a>

这将更改自身引用的URI和ID，同时允许您保留（怪异）.hide：target〜.list语法。