How do I access a dynamic id via a directive?

Asked

Viewed 1,419 times

4

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

Briefly, I’m using the bootstrap accordion example, and in my dashboard I have an ng-repeat that every 5 seconds updates the content of the object I’m iterating. What I need to do is keep the status of my panel ( expanded / not expanded ) even after the data reload of the object I am iterating.

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

OBS.: When the data of the object is reloaded, the previous state of the panel is not maintained, that is, if it was not expanded, it returns to the initial state, which is from the expanded panel ( This is because mine am using the class is panel-Collapse Collapse in in the section that includes the lines below my panel.

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

Someone please knows some alternative to treat this situation ?

angularjs angularjs-directives
  • 1

    Would it be possible for you to put a basic example of how it works on Plunker? It would make the test much easier.

  • 1

    That’s the plunker with the above example. For some reason that I didn’t identify the effect to expand or not, it’s not working in the plunker.. but when I open the page in the browser it works :(I don’t think it will do much, but here it goes: http://plnkr.co/edit/RAI9d7Qpt4pBhBVLzK3j?p=preview

  • Now it’s ok, it was the import order of the scripts. I put jQuery import first and now I can test.

  • I was able to resolve handling in the . js file to synchronize only the array of people during the interval.

1 answer

1

  • When the user selects an item from Accordion, save Id on $scope:

    • View 

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

    • Controller

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

  • Apply to elements under iteration via ng-repeat, the classes that define their behavior via ternary comparison. Example:

    <div ng-style="($local.id == IdSelecionado ) ? 'height: auto;' : 'height:0px;'">

Browser other questions tagged angularjs angularjs-directives

You are not signed in. Login or sign up in order to post.