Clever Geek Handbook

Change content inside ng-include after button / link clicked

I am presenting content inside a div using ng-include and im trying to change the filename (table.html) im including ng-include:

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

the change must be the result of clicking on one of the menu items, so when someone clicks on one of the links, the content inside the main> div will change to match the content inside the file whose name we passed to nav (). I tried to define each link like this:

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

and how to define the nav () function in the controller (they are both under the control of the same controller) to send it to ng-include, the name of the file where I want its contents to be rendered, but I coukdnt figure out how do it, any idea please?

+3


source to share


1 answer


Pass variable to ngInclude

:

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

HTML:



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

Note that ng-include

there are no quotes in the attribute .

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

.

+5


source






More articles:


All Articles