AngularJS using an expression as an href

Question

My webpage is set up so when a user selects one of many options a number of hyperlinks will appear and take you to that webpage. To make my code less DRY I created an ng-repeat div to output all the options for the user. All the hyperlinks appear on the page properly but the links themselves are broken because the href wont work with an expression in it.

<div style="text-align:center" ng-repeat="page in pages">
    <a href='@Url.Action("{{ page.name }}", "Dashboards")'>{{ page.name }}</a>
</div>

I tried to replace href with ng-href as its supposed to help the expression get processed before the HTML changes the page but that had no effect. Then I removed both curly braces and quotation marks around the expression because you are not supposed to need them when in an expression already. But the code now had an error and because of this it wouldn't run. This is how it looked when each page we created individually:

<a href="@Url.Action("ReviewAndAdjust", "Dashboards")">ReviewAndAdjust</a>
<a href="@Url.Action("Maps", "Dashboards")">Maps</a>

Answer 1

You cant use server code (Razor) with client code {{ expression }} so you have to to decode the @Url.Action so it can be processed. You have to create a url variable so it will work

@{
  var url = Url.Action("{{ page.name }}", "Dashboards");
  url = url = HttpUtility.UrlDecode(url);
}


<div style="text-align:center" ng-repeat="page in pages">
    <a ng-href="@url">{{ page.name }}</a>
</div>