2

I am using a datepicker control on my page which is rendered through ng-if dependent on a specific dropdown value.

The problem I'm facing is since at the time of rendering, that datepicker input is not part of DOM, so later when I change the value of dropdown, the datepicker control does not work.

If I use ng-show, I encounter issues in validations.

Any suggestions?

Thanks.

A Hassan
  • 119
  • 10
  • Which datepicker do you use or is it selfmade? And did you try to use the ControllerAs Syntax? – MrWook Sep 07 '17 at 06:16

2 Answers2

1

Use ng-show/ng-hide instead of ng-if, because the ng-if directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ng-if evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

More details. please refer this link : what is the difference between ng-if and ng-show/ng-hide

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • In case of ng-show/hide, I have to manually handle validations, right? – A Hassan Sep 07 '17 at 05:37
  • @AliHassan Nope. `ng-show` also worksas `ng-if`. You just put the expression which is you mentioned in `ng-if` expression. – Ramesh Rajendran Sep 07 '17 at 05:39
  • Thanks Ramesh, let me have a look at it. – A Hassan Sep 07 '17 at 05:42
  • Worth adding is that ng-if also creates a new scope which can have it's downsides. – Marcus Höglund Sep 07 '17 at 06:31
  • @AliHassan `ng-show` doesn't work as `ng-if`. The main difference is that the first one just uses css `display:none` to hide element whereas the second one removes element from DOM. It means that ng-show will keep validation errors becacuse ngModelController is still available. Could you please recreate your code at plnkr? – krutkowski86 Sep 07 '17 at 07:12
0

Try "$scope.apply()" after the toggling of ng-if variable.

Aji Aneesh
  • 121
  • 8