关于javascript：在angular.js中有条件地显示链接


Displaying link conditionally in Angular.js

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

1
2
3
4
5
6
7
8
9
<tr ng-repeat="entry in tableEntries">

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

  ...
</tr>

如您所见，当entry.url不为空，而不是纯文本时，我正试图显示一个可单击的URL。它很好用，但看起来很难看。有更优雅的解决方案吗？

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

1
2
3
4
<td>
  <span ng-if="entry.url != ''">{{entry.school}}</span>
  <span ng-if="entry.url == ''">{{entry.school}}</span>
</td>

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

相关讨论

你可以试试。

hello
hello

但是你用的ngSwitch应该没问题。

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

HTML

1
2
3
4
5
6
<tr ng-repeat="entry in tableEntries">
  <td>
    <link model="entry"></link>
  </td>
  ...
</tr>

JS

1
2
3
4
5
6
7
8
9
10
app.directive('link', function() {
    return  {
        restrict: 'E',
        scope: {
           model: '='
        },
        template: '{{model.school}}<span ng-if="model.url == ''"> {{ model.school }}</span>'

    }
});

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

1
2
3
4
<td ng-switch="!!entry.url">
    <span ng-switch-when="true">{{entry.school}}</span>
    <span ng-switch-when="false">{{entry.school}}</span>
</td>

一个好的读物是什么！！(不是)javascript中的运算符？双重否定(！！)在javascript中-目的是什么？

我建议在td中使用ng class="‘classname'：whentryurliswhatever"，并更改访问的css样式，例如：

1
2
3
4
5
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时发生的情况。

1
2
3
4
5
$scope.yourFunction = function(url){
    if(!!url){
        window.location = YourURL;
    }
}

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

1
2
3
4
5
6
 <tr ng-repeat="entry in tableEntries">
  <td ng-class="{'className': !!entry.url}">
    <span ng-click="yourFunction(entry.url)">{{entry.school}}</span>
  </td>
  ...
</tr>
相关讨论