Question

我正在尝试制作一个按钮列表，一旦选择了要显示的按钮下面的相应div，我之前使用过类似的代码：

<li><button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="section = !section">Structure and function of the processor</button></li>

哪种方法正常，所以我猜它与$ index

有关

你知道我怎么能做到这一点吗？

<div class="w3-panel" ng-show="section">
    henlo content
</div>

<div ng-app="tApp" ng-controller="tController">
    <ul class="w3-ul">
    <div ng-repeat="x in items">
        <li>
            <button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="section{{$index}} = !section{{$index}}">{{x.name}}</button>
        </li>
        <div class="w3-panel" ng-show="section{{$index}}">
            {{x.content}}
        </div>
    </div>
    </ul>
</div>
<script>
        var app=angular.module("tApp", []);
        app.controller("tController", function($scope)
        {
                $scope.items=[{name:"first",content:"henlo first"},{name:"second", content:"henlo second"}];
        });
</script>

Answer 1

您可以使用ng-init初始化属性并使用该属性来显示/隐藏内容

<div ng-repeat="x in items" ng-init="x.displayContent = false">
    <li>
        <button class="w3-button w3-grey w3-hover-dark-grey w3-round-xxlarge" ng-click="x.displayContent = !x.displayContent">{{x.name}}</button>
    </li>
    <div class="w3-panel" ng-show="x.displayContent">
        {{x.content}}
    </div>
</div>

ng-repeat打开内容

1 个答案: