CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Sanjaya
Sanjaya

Reputation: 156

How to change a div when a link is clicked and show its content

I need to change a div in a page and change the content of that div when a link is clicked.I want to do it with angularjs.For example I have 3 links as view1 view2 and view3.These 3 links are inked in to 3 html files view1.html,view2.html and view3.html which contain different contents in each of those files.

When I click the link view1 I need to load view1.html page content in a div.(Dynamically load without changing the other content in the page)and when view2 is clicked view2.html is clicked it should be loaded in to the div.How can I do it?If I use ng-view it will load a whole page.Do I need to use ng-click?If so how can I do it?Please explain..Do I need controllers?If so give me a example :(

Upvotes: 0

Views: 1320

Answers (2)

sylwester
sylwester

Reputation: 16498

You can use ng-include please see demo here
http://plnkr.co/edit/fLIimJZ6GjvQJPU7SWRD?p=preview

  <a href="" ng-click="template='view1.html'">View 1</a>
  <a href="" ng-click="template='view2.html'">View 2</a>    
  <a href="" ng-click="template='view3.html'">View 3</a>

  <div ng-include="template"></div>

Upvotes: 1

Abhishek Jain
Abhishek Jain

Reputation: 2977

If you want only one of the views to be displayed at one point of time, then use ngSwitch. Details here

Otherwise, use ngIf/ngShow to conditionally show views.

Upvotes: 0

Related Questions