为相同的 <a> 标签设置不同的超链接（使用 AngularJs）答案

【问题标题】：Set different hyperlink for same <a> tag (Using AngularJs)为相同的 <a> 标签设置不同的超链接（使用 AngularJs）
【发布时间】：2016-07-24 14:07:45
【问题描述】：

我有一个非常奇怪的问题。在网上搜索了很多，但找不到正确的解决方案。

<ul class="dropdown-menu">
                    <li><a ng-model="data" href="Pre.html" target="_blank">Pre</a></li>
                    <li><a href="Post.html" target="_blank">Post</a></li>
</ul>

我有一个简单的下拉菜单，其中 Pre 和 Post 作为下拉列表中的列表。当用户点击 Pre 时，pre.html 页面打开，当他点击 post 时，post.html 页面打开。

这是正常操作。现在我想这样做。

如果用户点击超链接“Pre”，假设控制器端的 $scope.data= fasle，那么 Pre.html 页面应该打开一次

如果 $scope.data = true，那么我希望超链接打开其他一些 html，而不是 Pre.html。例如块.html。

如何确保根据控制器中的条件显示特定的 html 页面。

<ul class="dropdown-menu">
                    <li><a ng-model="data" href="Pre.html OR Block.html" target="_blank">Pre</a></li>
                    <li><a href="Post.html" target="_blank">Post</a></li>
</ul>

如上所见，href="Pre.html OR Block.html"，表示我想根据控制器端数据显示两个页面中的任何一个

【问题讨论】：

标签： javascript jquery html angularjs hyperlink

【解决方案1】：

为什么不根据控制器的值使用ng-if 切换两个不同的标签。你可以做类似的事情，

<li>
<a ng-if="data" ng-model="data" href="Block.html" target="_blank">Block</a>
<a ng-if="!data" ng-model="data" href="Pre.html" target="_blank">Pre</a>
</li>
<li><a href="Post.html" target="_blank">Post</a></li>

然后控制器中的一些逻辑从真变为假。

【讨论】：

【解决方案2】：

您可以使用ngHref 并编写如下内容：

<a ng-href="{{ data ? 'Pre.html' : 'Block.html' }}" target="_blank">Pre or Block</a>

【讨论】：

代码错了吗？不管“数据”的值是什么，第一个 .html 总是会显示出来。
你能确定data真的改变了吗？请查看this fiddle 并检查控制台以查看 href 更改。