sr.u sr.u - 27 days ago 17
AngularJS Question

ng-if doesn't works as expected

I have a buttons array in my model, and an 'ng-if' in the template for each button:

self.aButtons.push({
label: __('Siguiente'),
class: 'btn-moduloAvance',
show: (self.oContrato.definirPago || self.oContrato.horario_definido)
}
});


That's the Html:

<button ng-if="boton.show"
ng-repeat="boton in personaAndContrato.aButtons"
type="button"
ng-class="boton.class"
/>


I know that i'm assigning a boolean to the 'show' property, so it's impossible it changes because it's a simple type.

By the way I'm trying to assign a function to the 'show' property but i'm getting the following error:

self.aButtons.push({
label: __('Siguiente'),
class: 'btn-moduloAvance',
show: function () {
return (self.oContrato.definirPago || self.oContrato.horario_definido);
}
});


Html (edited):

<button ng-if="boton.show()"
ng-repeat="boton in personaAndContrato.aButtons"
type="button"
ng-class="boton.class"
/>



TypeError: v2.show is not a function
at fn (eval at compile (angular.js?version=alpha.1:14539), :4:240)


Some ideas? Does i'm missing or missunderstanding something?

Thanks in advance!

Answer

You can't have ng-repeat and ng-if in the same tag if ng-if refer to the inner variable of ng-repeat.

Just split it :

<div ng-repeat="boton in personaAndContrato.aButtons">
    <button ng-if="boton.show()"
      type="button"
      ng-class="boton.class"
   />
</div>