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

基本上，我的模板中有以下代码：

<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>

但我会重复两次几乎相同的比较，这看起来更糟。你们会怎么做？

你们可以试试

你好

---

但是您正在使用的样式应该很好。

我建议在td中使用ng类=“{'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>

{{entry.school}
...

使用双重否定，它被转换为布尔值

！！如果字符串不是空的，则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>

{{entry.school}

---

良好的阅读和

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

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>'

    }
});

app.directive（'link'，function（）{
返回{
限制：'E'，
范围：{
型号：'='
},
模板：“{model.school}”
}
});

这可能会帮助您：使用

然后您可以简单地使用

true/false

单击什么？我不知道你在说什么。你建议在CSS中隐藏未使用的元素吗？这比我现在做的更好吗？一点也不，在你的css中你可以有

.className span{text-decoration:underline；cursor:pointer；}

和任何你想要的链接样式。然后，在你的span中，让

ng click=“yourFunction（）”

我编辑了答案，试图更好地解释这一点。

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>'

    }
});