Why does ng-repeat from Angularjs not work in Bootstrap Modal?

Asked

Viewed 274 times

0

In my project, I used a nesting of ng-repeat to assemble several checkbox dynamically, enabling the user to combine filters, what works perfectly when mine controller upload the lists.

Now, the user asked to put these filters inside a modal, but apparently the ng-repeat does not work within the modal. Why it happens?

I’m not asking for alternative solutions like using ui.bootstrap and inject the modal of the angular itself. I do want to know why it doesn’t work with the modal natively.

The javascript Bootstrap eliminates tags containing the ng-repeat or something? I’m using it wrong?

Here’s an example of mine HTML:

        <!-- SEPARATED MODAL BODY - WORKS -->
        <div ng-repeat="campo in camposFiltradosMotorista">
            <div ng-repeat="tipo in tiposMotorista[campo]" class="checkbox checkbox-primary" class="styled">
                <strong>
                    <input id="motorista{{tipo}}" type="checkbox" ng-model="tiposMotoristaSelecionados[campo][tipo]" />
                    <label for="motorista{{tipo}}">
                        {{tipo}} - ({{ (motoristasFiltrados | filter:count(campo, tipo)).length }})
                    </label>
                </strong>
            </div>
            <hr ng-if="!$last" />
        </div>

        <div class="modal inmodal" id="filtro-modal-motoristas" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <i class="fa fa-laptop modal-icon"></i>
                        <h4 class="modal-title">Filtros de Motorista</h4>
                        <small class="font-bold"><i class="fa fa-lightbulb-o"></i> Você pode combinar vários filtros</small>
                    </div>
                    <div class="modal-body">
                        <span>Filtros</span>
                        <!-- INSIDE MODAL BODY - DOESN'T WORK :( -->
                        <div ng-repeat="campo in camposFiltradosMotorista">
                            <div ng-repeat="tipo in tiposMotorista[campo]" class="checkbox checkbox-primary" class="styled">
                                <strong>
                                    <input id="motorista{{tipo}}" type="checkbox" ng-model="tiposMotoristaSelecionados[campo][tipo]" />
                                    <label for="motorista{{tipo}}">
                                        {{tipo}} - ({{ (motoristasFiltrados | filter:count(campo, tipo)).length }})
                                    </label>
                                </strong>
                            </div>
                            <hr ng-if="!$last" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
angularjs bootstrap modal ng-repeat

  • In Chrome, Ctrl+Shift+I (Developer Tools): see Console for any errors, if yes, post here, please.

  • My blind bet: your modal interface is opening with isolated scope, and consequently ignoring camposFiltradosMotorista (since this belongs to a predecessor scope.)

  • @Nottherealhemingway already checked, no error.

  • @Onosendai actually makes sense. What could make it an isolated scope? I’ve actually tried using the ui.bootstrap at the angle, but I don’t know how to make him carry this modal-body. In the examples I’ve seen, you have to use a resolve that I didn’t understand how to use and pass all these models that I use in the html.

  • can post your javascript too?

1 answer

0

You haven’t mentioned which modal engine you’re using - assuming you’ve created your own, check your scope definition:

app.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {}        // Cria uma versão isolada do escopo
  }
}

If you want access to properties defined in scopes of elements that encapsulate the directive, use true in defining:

app.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: true      // Herda escopo
  }
}

Browser other questions tagged angularjs bootstrap modal ng-repeat

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