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

Question

我们已经为这个问题苦苦挣扎了很长时间，但我们找不到答案。我们将 Ionic 与 AngularJS 一起用于动态视图。

我们想要单击一个项目字段，在本例中为 header 并使某些内容在可见和不可见之间切换。

我们有以下代码：

<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

你不需要特别在你的控制器中设置一个功能，唯一需要的是放一个$scope.toShow=false

此外，如果您不在 ng-repeat loop 中，则不应使用 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.

所以，在控制器中：

$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>

Answer 2

您的第一个问题是您的 ng-click 中有一个布尔语句。我假设你想要 ng-click="toShow = !toShow">

第二个问题是 <ion-item> 指令使用隔离作用域，因此您在 ngClick 属性中定位的 toShow 变量可能使用该隔离作用域而不是您可能期望的父控制器。解决这个问题的最好方法是创建一个设置函数来处理 toShow 的值，例如：

$scope.setToShow = function(){
    $scope.toShow = !$scope.toShow;
}

现在你的 ngClick 变成了

ng-click="setToShow()"

Angular 应该在您期望的控制器上查找函数，而不是在子作用域上创建新的属性。

您也可以使用

直接访问 $parent

ng-click=$parent.toShow = !$parent.toShow">

我不建议这样做，因为如果在重构或其他操作中添加了另一个范围，$parent 最终可能会引用其他内容。

编辑：使用数组是一种跟踪条件参数列表的简单方法，就像您在示例中需要的那样。

$scope.setToShow = function(index){
        $scope.toShowArr[index] = $scope.toShow[index] === undefined ? false : !$scope.toShow[index];
}

我正在使用 false 处理未定义的情况，但您可能觉得需要另行处理。

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

How can I collapse and expand multiple sections with AngularJS and ng-click

javascript

angularjs

ionic