Problema: Preciso dentro de uma diretiva angularJs, acessar um id montado dinamicamente dentro de um ng-repeat, e com isso manipular a classe de um item específico.
Resumidamente, estou usando o exemplo accordion do bootstrap, e no meu painel tenho um ng-repeat que a cada 5 segundos atualiza o conteúdo do objeto que estou iterando. O que preciso fazer é manter o estado do meu painel ( expandido / não expandido ) mesmo após a recarga dos dados do objeto que estou iterando.
Para controlar o estado gostaria de acessar dentro da diretiva o id do item que foi clicado ( para fechar o painel por exemplo ) e mantê-lo nesse estado, mesmo após a recarga dos dados.
OBS.: Quando os dados do objeto são recarregados, o estado anterior do painel não é mantido, ou seja, se não estava expandido, ele retorna ao estado inicial, que é do painel expandido ( Isso ocorre porque a minha estou usando a classe é panel-collapse collapse in no trecho que inclui as linhas abaixo do meu painel.
Abaixo meu arquivo html
<body ng-controller="Controller">
<!-- Header principal, com o menu titulo e pequisa de pessoas -->
<div class="panel-group" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" ng-repeat="local in objeto.locais">
<div class="panel-heading" ng-model="collapseLocal" ng-init="collapseLocal = true" ng-click="controlaPainel(local.id)">
<h4 class="panel-title">
<a data-toggle="collapse" href="#local-{{local.id}}" aria-expanded="true" aria-controls="local-{{x.id}}">
{{local.nome}}
</a>
</h4>
</div>
<div id="local-{{x.id}}" class="panel-collapse collapse in" role="tabpanel" my-repeat-directive>
<div class="panel-body" ng-repeat="pessoa in local.pessoas">
{{pessoa.nome}}
</div>
</div>
</div>
</div>
Javascript
angular.module('teste', []).directive('myRepeatDirective', function(){
return{
link: function($scope, element, attrs) {
for(x in $scope.p){
$('#local-' + $scope.p[x]).removeClass('panel-collapse collapse in').addClass('panel-collapse collapse');
}
}
}; }).controller('Controller', ['$scope', '$interval',function($scope, $interval) {
$scope.p = [];
$scope.objeto = [];
carregaValores();
var intervalo = $interval( function() {
carregaValores();
}, 5000);
$scope.controlaPainel = function(localId){
var x = $scope.p.indexOf(localId);
if(x == -1){
$scope.p.unshift(localId);
}else{
$scope.p.splice(x ,1);
}
}
function carregaValores(){
$scope.objeto = {"locais" :[
{"id":"1", "nome": "Local 1", "pessoas":[{"nome" : "Maria"},{"nome" : "Joao"},{"nome" : "Pedro"}]},
{"id":"2", "nome": "Local 2", "pessoas":[{"nome" : "Joselito"},{"nome" : "Osvaldo"}]},
{"id":"3", "nome": "Local 3", "pessoas":[{"nome" : "Serafina"}]}
]};
}; }]);
Alguém por favor, conhece alguma alternativa para tratar essa situação ?