Question

我刚刚开始拿起javascript / angular和html，我正在制作一张桌子，我想在表格中添加下拉菜单，扩展到更大的描述。我添加了一张桌子，然后使用了＆＃34; ng-repeat＆＃34;为了填充表格。我还添加了可以折叠和展开的按钮，但是当我点击任何按钮时，只有第一个按钮会展开。因此，即使我点击第2个，第3个等，它也只会打开第一个下拉菜单。

如何制作相应按钮以扩展正确的描述？我不确定它是否是＆＃34; ng-repeat＆＃34;这使它无法按预期工作。我认为这可能与按钮的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; 
}

...用class＆＃34; list＆＃34;来定位div。前面有URI。好吧，它匹配你的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，同时允许你保留（freaky）.hide：target~.list语法。

只有第一个按钮会在下拉菜单中展开

2 个答案: