javascript - 如何使用 AngularJS 和 ng-click 折叠和展开多个部分

Question

我们已经解决这个问题很长时间了，但找不到答案。我们将 Ionic 与 AngularJS 结合使用来实现动态 View 。

我们想要单击一个项目字段(在本例中为标题)，并在可见和不可见之间切换。

我们有以下代码:

<ion-item class="item-divider positive" ng-init="toShow=true" ng-click="toShow != toShow">
                Display Header
            </ion-item>
            <div ng-show="toShow">
                <ion-item class="row">
                     <!-- items to show -->
                 </ion-item>
            </div>
        </ion-list>

我们无法让这个工作。我们已经尝试了互联网上的每个示例，主要是通过示例。我们还尝试为 ng-click 制作函数，但我们需要它是动态的，这样它也可以用于不同的领域。

请帮助我们

Answer 1

您并不特别需要在 Controller 中设置函数，唯一需要的就是放置一个 $scope.toShow=false

另外，如果您不在 ng-repeat 循环 中，则不应使用 ng-init根据 Angular 的文档:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

所以，在 Controller 中:

$scope.toShow=false

和在您的模板中:

<ion-item class="item-divider positive" ng-init="toShow=true" ng-click="toShow = !toShow">
                Display Header
            </ion-item>
            <div ng-show="toShow">
                <ion-item class="row">
                     <!-- items to show -->
                 </ion-item>
            </div>
        </ion-list>