在 Angular.js 中有条件地显示链接

Posted 2023-02-22

【中文标题】在 Angular.js 中有条件地显示链接

【英文标题】：Displaying link conditionally in Angular.js

【发布时间】：2015-02-28 17:12:08

【问题描述】：

基本上，我的模板中有这段代码：

<tr ng-repeat="entry in tableEntries">

  <td ng-switch="entry.url == ''">
    <span ng-switch-when="false"><a href="entry.url">entry.school</a></span>
    <span ng-switch-when="true">entry.school</span>
  </td>

  ...
</tr>

如您所见，当entry.url 不为空时，我尝试显示可点击的 URL，否则显示纯文本。它工作正常，但看起来很丑。有没有更优雅的解决方案？

我能想到的另一种方法是使用ng-if：

<td>
  <span ng-if="entry.url != ''"><a href="entry.url">entry.school</a></span>
  <span ng-if="entry.url == ''">entry.school</span>
</td>

但是我会重复两次几乎相同的比较，这看起来更糟。你们会如何处理这个问题？

【问题讨论】：

这可能对你有帮助：***.com/questions/15810278/…

使用<td ng-switch="!!entry.url">然后你可以简单地使用true/false

【参考方案1】：

你可以试试。

<div ng-show="!link">hello</div> <div ng-show="!!link"><a href="link">hello</a></div>

但是您使用的ngSwitch 应该没问题。

【参考方案2】：

使用双重否定，它转换为布尔值，因此!!entry.url 将返回true 如果字符串不为空。

<td ng-switch="!!entry.url">
    <span ng-switch-when="true"><a href="entry.url">entry.school</a></span>
    <span ng-switch-when="false">entry.school</span>
</td>

很好读 What is the !! (not not) operator in javascript? 和 Double negation (!!) in javascript - what is the purpose?

【参考方案3】：

您可以创建隐藏复杂性的自定义指令：

HTML

<tr ng-repeat="entry in tableEntries">
  <td>
    <link model="entry"></link>
  </td>
  ...
</tr>

JS

app.directive('link', function() 
    return  
        restrict: 'E', 
        scope: 
           model: '='
        ,
        template: '<a ng-if="model.url != ''" href="model.url">model.school</a><span ng-if="model.url == ''">  model.school </span>'

    
);

【参考方案4】：

我建议在您的 td 中添加一个 ng-class="'className': whenEntryURLisWhatever"，并使其更改访问的 css 样式，例如：

td span /*#normal styles#*/ 
.className span /*#styles in the case of added classname (when it is a link)#*/
           text-decoration: underline; 
           cursor:   pointer; 

然后只需在您的 javascript 代码中定义的函数中更改 ng-click 时发生的情况。

$scope.yourFunction = function(url)
    if(!!url)
        window.location = YourURL;
    

这将减少代码重复，因为您的 html 现在可以是：

 <tr ng-repeat="entry in tableEntries">
  <td ng-class="'className': !!entry.url">
    <span ng-click="yourFunction(entry.url)">entry.school</span> 
  </td>
  ...
</tr>

【讨论】：

什么 ng-click？我不知道你在说什么。您是否建议在 CSS 中隐藏未使用的元素？怎么比我现在做的好？

一点也不，在你的css中你可以有.className span text-decoration: underline; cursor: pointer; 和你想要的任何其他样式的链接。然后在你的范围内，有ng-click="yourFunction()"

我已经编辑了答案以尝试更好地解释这一点。