How to access a dynamic id through a directive?

Question

How to access a dynamic id through a directive?

Navigation

#1 by (1 votes)

4

Problem: I need within an angular directive, access a dynamically-mounted id inside an ng-repeat, and thereby manipulate the class of a specific item.

In short, I'm using the accordion bootstrap example, and on my panel I have a ng-repeat that every 5 seconds updates the contents of the object I'm iterating. What I need to do is to maintain the state of my panel (expanded / unexpanded) even after reloading the data of the object I'm iterating.

To control the state I would like to access within the policy the id of the item that was clicked (to close the panel for example) and keep it in that state, even after reloading the data.

NOTE: When object data is reloaded, the previous panel state is not maintained, ie if it was not expanded, it returns to the initial state, which is from the expanded panel (This is because mine is using the class is collapsed in the snippet that includes the lines below my dashboard.

Below my html file

<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"}]} 
        ]};
    }; }]);

Does anyone know of any alternatives to address this situation?

angularjs angularjs-directives

asked by anonymous 11.02.2015 / 19:14

1 answer

How do I know if the email has reached the Recipient? Summer time error in bootstrap-datepicker

score 1 · Answer 1

When the user selects an Accordion item, save the Id in $scope :

View

<div 
 class="panel-heading" 
 ng-click="selecionaId(local.id)">

Controller

$scope.selecionaId = function(parm) {
    $scope.IdSelecionado = parm;
}

Apply, in the elements under iteration via ng-repeat , the classes that define its behavior via ternary comparison. Example:
```
<div ng-style="($local.id == IdSelecionado ) ? 'height: auto;' : 'height:0px;'">
```