AngularJS Accordion is-open check with ng repeat

Я могу заставить его работать без ng-repeat. Однако, когда у меня есть список элементов - Open не работает.
1. Я должен иметь возможность открывать одну панель за раз (иногда она открывает все)
2. is-Open должен получить значение true при открытии панели
3. Если пользователь нажимает на список содержимого панели после открытия панели, я должен иметь возможность извлекать значение (аналогично открытому на панели).AngularJS Accordion is-open check with ng repeat

HTML

<body ng-app="myApp"> 
     <div class="col-sm-6" ng-controller="Controller"> 
      <div class="column-nav"> 
       <uib-accordion close-others="oneAtATime"> 
        <uib-accordion-group ng-repeat="group in groups" ng-scroll="group in groups" is-open="$parent.isOpen"> 
         <uib-accordion-heading ng-model="checkTitle"> 
          {{group.title}} 
         </uib-accordion-heading> 
          <a>{{group.content}}</a> 
        </uib-accordion-group> 
       </uib-accordion> 
      </div> 
      <div> 
       Panel Header Open: {{isOpen}} <br> 
       Panel oneAtATime: {{oneAtATime}} 
      </div> 
     </div> 
    </body>

app.js

myApp.controller('Controller', ['$scope', function($scope) { 

    $scope.isOpen = false; 
    $scope.oneAtATime = true; 

    // Data 
    $scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     content: "Content - 1" 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     content: "Content - 2" 
    } 
    ]; 

    //log 
    $scope.$watch('isOpen', function(){ 
     console.log(" watch isOpen:" +$scope.isOpen); 
    }, true); 

    }]);

Plunker

Спасибо за вашу помощь и предложения.

источник

2016-03-17 Mad-D

Этот это всего лишь небольшая вариация других ответов , (Я все еще не уверен насчет своего третьего требования, или то, что вы имеете в виду по ней, по крайней мере.)

Мы не изменить:

...is-open="$parent.isOpen">

В этом (нет необходимости изменять какие-либо данные):

...is-open="group.isOpen" ng-click="updateOpenStatus()">

И добавьте функцию в контроллер, чтобы установить «глобальный» статус открытия.(Требование 2)

$scope.updateOpenStatus = function(){ 
    $scope.isOpen = $scope.groups.some(function(item){ 
    return item.isOpen; 
    }); 
}

http://plnkr.co/edit/xMgmLiL65BBimUJ7wbVE?p=preview

источник

2016-03-17 20:52:08 ippi

спасибо, я имею в виду, если я нажимаю на Content-1 с первой панели, мне нужно знать, что пользователь нажал этот контент. Исходя из этого, я могу загружать страницы с помощью маршрутизатора. Поэтому я надеялся, что если аккордеон имеет что-то подобное, то функция open-open. –

Дайте уникальный нг-модель для каждого аккордеона, то он будет работать для вас

<uib-accordion-group ng-repeat="group in groups" ng-scroll="group in groups"> 
    <uib-accordion-heading ng-model="checkTitle$index"> 
     {{group.title}} 
    </uib-accordion-heading> 
    <a>{{group.content}}</a> 
</uib-accordion-group>

источник

2016-03-17 20:26:35

Нет, это не –

Пусть panel1 открыта и теперь я нажмите на panel2 так панель 1 должна быть близка? –

да, а также 'ng-model =" checkTitle $ index "' не привязывало никакого значения –

Попробуйте это:

$scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     content: "Content - 1", 
     isOpen: false 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     content: "Content - 2" 
     isOpen: false 
    }

С:

Panel Header Open: {{group.isOpen}} <br>

Я предполагаю, что каждая группа должна содержит свои свойства.

UPDATE

проверить его на plunker и это работает так:

$scope.groups = [ 
    { 
     isOpen: false, 
     title: "Dynamic Group Header - 1", 
     content: "Content - 1" 
    }, 
    { 
     isOpen: false, 
     title: "Dynamic Group Header - 2", 
     content: "Content - 2" 
    }

<uib-accordion-group ng-repeat="group in groups" ng-scroll="group in groups" is-open="group.isOpen">

И удалить $ scope.isOpen от JS

источник

2016-03-17 20:44:02 dpaul1994

Я знаю его довольно поздно, чтобы ответить на этот вопрос, но у меня есть очень простое решение, которое может помочь в четвертый посетители,

Вот оно:

<div ng-if="$parent.isOpen" ng-cloak>

Спасибо всем, и если вы хотите удалить ng-if после того, как содержимое будет обработано, чтобы вы могли сохранить некоторую обработку, используйте ::

<div ng-if="::$parent.isOpen" ng-cloak>

источник

2017-07-16 10:53:48

AngularJS Accordion is-open check with ng repeat

ответ

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