Question

我刚开始使用Angular，我从codepen Accordion List

获得了一个代码示例

我正在尝试在html中使用我的数据：

<div class="group">
  <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
  <ion-item class="item-accordion" ng-show="isGroupShown(group)">
    <div class="form-group">
      <label></label>
      <input>
    </div>
  </ion-item>
</div>
<div class="group">
  <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
  <ion-item class="item-accordion" ng-show="isGroupShown(group)">
    <div class="form-group">
      <label></label>
      <input>
    </div>
  </ion-item>

并且JS设置如下：

angular.module('my-app',['ionic'])

.controller('main', function($scope) {
  $scope.groups = [{
    name: "Basic Info",
    items: [1,2,3]},
    {
      name: "Torso Measures",
      items: [1,2,3]},
    {
      name: "Extra measures",
      items: [1,2,3,4,5],
    }
  ];

  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };

});

问题是每当我点击1组时，所有这些都会展开/折叠。在JS / jQuery中我会传递一个id，但我认为有一种“有角度的方式”来做到这一点。有人能帮助我吗？

Answer 1

所有群组在点击时展开的事实可能是因为您（在您的代码中）有两个使用相同群组模型的div。

我说的是你的切换功能中的组：

ng-click="toggleGroup(group)"

在教程中，writter使用ng-repeat指令生成他的div

<div ng-repeat="group in groups">

此行分组并将组成员中的每个项目转换为新的组模型。这可能就是为什么你的手风琴都扩展了，（并且可能所有的手风琴都有相同的内容）。你能给我们一个更多的合作

如果你想使用bootstrap手风琴我建议你看看 Angular-ui，一个Angular模块来替换bootstrap.js并以Angular方式做同样的事情（使用指令，数据绑定......）

Answer 2

演示没有ng-repeat here。

使用ng-repeat here演示。

为什么您的代码无法正常工作 由于您未在标记中使用ng-repeat，因此在这些地方 group

<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> <ion-item class="item-accordion" ng-show="isGroupShown(group)">

都是 undefined 。

您需要为group，toggleGroup(group)初始化isGroupShown(group)变量，如果在同一范围内使用两次，则应该使用不同的名称。更新您的html：

<div class="group" ng-init="groupid1=1"> <ion-item class="item-stable" ng-click="toggleGroup(groupid1)" ng-class="{active: isGroupShown(groupid1)}"></ion-item> <ion-item class="item-accordion" ng-show="isGroupShown(groupid1)"> <div class="form-group"> <label></label> <input> </div> </ion-item> </div> <div class="group" ng-init="groupid2=2"> <ion-item class="item-stable" ng-click="toggleGroup(groupid2)" ng-class="{active: isGroupShown(groupid2)}"></ion-item> <ion-item class="item-accordion" ng-show="isGroupShown(groupid2)"> <div class="form-group"> <label></label> <input> </div> </ion-item> </div>

但是，通过使用ng-repeat ，您可以使用包含这样的html：

<div class="group" ng-repeat="group in groups track by $index"> <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item> <ion-item class="item-accordion" ng-show="isGroupShown(group)"> <div class="form-group"> <label></label> <input> </div> </ion-item> </div>

它应该有用。

在手风琴列表中选择组

2 个答案: