Выбор группы в списке аккордеона

Я только начал с Угловое, и я получил образец кода от 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 я передал идентификатор, но я думаю, что для этого есть «угловой способ». Может кто-нибудь мне помочь?

источник

2016-05-12 Onilol

Демо-версия без ng-repeathere.

Демо-версия с ng-repeathere.

Почему ваш код косяк работы: Поскольку вы не использовали 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) и должно быть другое имя, если используется дважды в то же scope.Update ваш 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>

Он должен работать.

источник

2016-05-12 14:17:27

Спасибо!Есть ли способ определить мои группы в разделе контроллера? Поэтому я мог бы использовать 'group in groups' – Onilol

Вы фактически ** выполняете ** определение групп в разделе контроллера этим выражением' $ scope.groups = [{...}, {...}, {.. .}] '. –

Как я могу его заменить? Сожалею. Я новичок в этом, и есть много информации, которая смущает, а не помогает. – Onilol

Тот факт, что все ваши группы расширяются по клику, вероятно, потому, что у вас есть (в вашем snipet of code) два divs, которые используют одну и ту же групповую модель.

Я говорю о группе, получавшей в вашей функции переключения:

ng-click="toggleGroup(group)"

В учебнике, writter использует директиву нг-повтора для создания его дивы

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

эта линия идет в группах и принимать каждый элемент из группы в новую модель группы. Это может быть причиной того, что ваши аккордеоны все расширяются (и, вероятно, все они имеют одинаковый контент). Не могли бы вы дать нам litle more co.

Если вы хотите использовать аккордеон начальной загрузки, я могу посоветовать вам взглянуть на Angular-ui, угловой модуль для замены bootstrap.js и сделать то же самое по-угловому (с использованием директив, привязки данных ....).

источник

2016-05-12 13:47:47 FitzChill

Выбор группы в списке аккордеона

ответ

Смежные вопросы