2

I'm trying to colapse some form questions when you click on the title "Block" (of those questions) and they are shown by a ng-repeat as shown: Here you have a screenshot

<form>
    <div ng-repeat="bloque in elementos track by $index"">
        <div ng-click="toggle({{bloque.index}})">
            <div class="card text-white bg-info mb-3" style=" position:absolute center">
                <div class="card-header text-center">{{bloque.supertitulo}}</div>
            </div>
        </div>
        <div class="preguntas{{bloque.index}}" ng-repeat="pregunta in bloque.preguntas">
            <div class="card border-primary " style="">
                <div class="card-body text-primary" style="background-color:#cef8ff">
                    <p class="card-text" style="font-size:smaller; margin: -15px; justify-content:flex-end; padding:10px">{{pregunta.titulo}}</p>
                </div>
            </div>
            <div class="form-group input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i class="fa fa-question"></i> </span>
                </div>
                <select class="form-control">
                    <option selected="">Seleccione una opción</option>
                    <option ng-repeat="opcion in pregunta.opciones">{{opcion}}</option>
                </select>
            </div>
        </div>    
    </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-block" style="background-color:greenyellow"> Enviar </button>
        </div>
</form>

And I have a function to toggle the questions inside de "Block" when you click on it:

$scope.toggle= function(index) {
            var x = document.getElementsByClassName("preguntas" + "${index}");
            for (var i = 0, length = x.length; i < length; i++) {
                if (x[i].style.display === "none") {
                    x[i].style.display = "block";
                } else {
                    x[i].style.display = "none";
                }
            }
        }

But I get this error:

Error: $parse:syntax Syntax Error Syntax Error: Token '{' invalid key at column 9 of the expression [toggle({{bloque.index}})] starting at [{bloque.index}}].`

How can I make this work? I guess there is another approach easier than mine and that works.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Miguel Cordero
  • 141
  • 1
  • 9
  • Don't use double curly brackets `{{` in AngularJS expressions. That is why you are getting a parse error. – georgeawg Apr 16 '19 at 16:23

1 Answers1

3

I think you can pass the index through in the following way. This should send the index into the toggle function.

<div ng-click="toggle($index)">

In the function you could check by.

$scope.toggle= function(index) {
    console.log(index) //  should be correct index.
}

Would probably take of the extra " here as well.

<div ng-repeat="bloque in elementos track by $index"">

Here is some documentation that may help.

devDan
  • 5,969
  • 3
  • 21
  • 40