Javascript 如何使用AngularJS和ng单击折叠和展开多个部分

我们已经为这个问题挣扎了很长一段时间，但我们找不到答案。我们正在将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点击，但我们需要它是动态的，所以它也可以用于不同的领域

---

请帮助我们

您不需要特别在控制器中设置函数，唯一需要的是放置一个

$scope.toShow=false

另外，如果您不在ng repeat

循环中，则不应使用
ng init
根据Angular的文件：

ngInit的唯一适当用途是为特殊属性设置别名
如下面的演示所示。除此之外，你应该
使用控制器而不是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>

并且在模板中：

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


显示标题
您的第一个问题是在ng click中有一个布尔语句。我假设您想要
ng click=“toShow=！toShow”>

第二个问题是，
指令使用了一个隔离作用域，因此您在ngClick属性中针对的toShow变量可能使用了该隔离作用域，而不是您预期的父控制器。解决此问题的最佳方法是创建一个设置函数来处理toShow的值，如：

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

现在你的点击变成

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处理未定义的条件，但是您可能会觉得有必要使用其他方法
 好的，我会问一个明显的问题——当你点击标题时，toShow是否改变了？我将条件更改为assigment，但这不起作用。当我点击离子项目时，什么都没有发生。谢谢你的帮助。我看到你编辑了你的文章。问题是，正如我在问题中所说，我们需要它动态。然后你必须制定一个自定义指令
{{{content}}
…我知道你的解决方案很好，而且也很有效，因为我们已经试过了。问题是我们需要使其动态化，使用此解决方案，我们必须为每个要展开和折叠的组件创建多个函数。当然，这不是一种非常有效的方法。然后使用数组跟踪要隐藏/显示的对象。您可以将当前单击项的索引传递给setter函数，该函数反过来处理在数组中该索引处设置值的操作。我编辑了我的答案以提供一个简单的示例。我想将此答案标记为答案，但我们修改了代码，使其适用于我们的应用程序。我们或者没有足够正确地理解您的代码，因为每次都会出现未定义的错误。