monstro monstro - 2 months ago 17
AngularJS Question

angular ng-click ng-show stopped working

I have this small code fragment:

<li ng-if="vm.data.Description" ng-click="expand=!expand">{{vm.data.Description}}</li>
<li ng-if="vm.data.LongDescription" ng-show="expand">{{vm.data.LongDescription}}</li>


vm.data.Description and vm.data.LongDescription contain values.

LongDescription is hidden, but when I click on Description, it becomes visible.
I toggle like this by setting expand flag true or false.

Why this code is not working ??

Answer

ng-if uses isolated scope that is why you cannot link your primitive variable (expand), so if you can just change expand to vm.expand and it will work...

and your ng-show is not needed there you already have ng-if for it...

<li ng-if="vm.data.Description" ng-click="vm.expand=!vm.expand">{{vm.data.Description}}</li>
<li ng-if="vm.data.LongDescription && vm.expand">{{vm.data.LongDescription}}</li>

and here is working PLUNKER