Question

我们在很长一段时间内一直在努力解决这个问题，但我们找不到答案。我们正在使用Ionic和AngularJS进行动态视图。

我们想点击一个项目字段，在这种情况下是一个标题，并在可见和不可见之间进行切换。

我们有以下代码：

<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-init，则不应该使用loop 根据Angular的文档：

ngInit的唯一合适用途是对特殊属性进行别名处理 ngRepeat的内容，如下面的演示所示。除了这种情况，你应该使用控制器而不是ngInit来初始化作用域上的值。

所以，在控制器中：

$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折叠和展开多个部分

2 个答案: