Search code examples
angularangular-directiveng-show

Angular: ng-model and ng-show not working


I'm trying to use the ng-show and ng-model directives to toggle a div when a checkbox is selected. I searched for many tutorial and it seems as simple as my following code:

<div>
  <input type="checkbox" unchecked name="advanced" ng-model="checked">
    <p>Advanced search</p>
</div>
<p ng-show="checked">
  advanced-search works!
</p>

But nothing happens. Am I missing something? Do I have to import something specific inside my AppModule?
Thanks for any hint.

Comment to the solution I'm using Angular 4 as specified after being asked. I'm new to Angular so I didn't get that the ng-show and ng-model are not used anymore. The documentation is not always clear and these two directives are used in almost every tutorial, so I thought there was a matter of choiche which one to use.
The selected answer was the working one, but a thanks goes to everyone who pointed out that those directives were wrong for my Angular version.

Solution

  • ng-show and ng-model are part of angularjs (1.x). In angular 4, you can do the following:

    <div>
  <input type="checkbox" unchecked name="advanced" [(ngModel)]="checked">
    <p>Advanced search</p>
</div>
<p [hidden]="!checked">
  advanced-search works!
</p>

    p.s. the user cleared in his comment on the question that he is using angular4.