CODEWITHSUNDEEP
javascripthtmlangularjs
Al.s
Al.s

Reputation: 310

changing the content inside ng-include after click on a button/link

I'm presenting content inside a div using ng-include and im trying to change the name of the file(table.html) im including with ng-include:

<main>
    <div ng-include="'table.html'">
    </div>
</main>

the change should be a result of a click on one of the menu items,so when someone click on one of the links, the content inside the main>div will change, according to the content inside the file which its name we passed to the nav() . i tried to do define each link like this:

        <li class="list-group-item"><a href="#" ng-click="nav(filename.html)">link</a></li>

and than define the nav() function in the controller (they are both under to control of the same controller) to make it send to the ng-include, the name of the file i want its content to be presented but i coukdnt figure out how to do that,any idea please?

Upvotes: 4

Views: 3567

Answers (1)

dfsq
dfsq

Reputation: 193281

Pass variable into ngInclude:

$scope.nav = function(path) {
    $scope.filePath = path;
};

HTML:

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

Note, that there are no quotes in ng-include attribute.

Then you can use it this way: ng-click="nav('filename.html')".

Upvotes: 6

Related Questions