Basically, I have this code in my template:
基本上,我在我的模板中有这个代码:
<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>
As you can see I'm trying to display a clickable URL when entry.url
is not empty and a plain text otherwise. It works fine, but it looks quite ugly. Is there a more elegant solution?
正如您所看到的,当entry.url不为空时我试图显示可点击的URL,否则显示纯文本。它工作正常,但看起来很难看。有更优雅的解决方案吗?
Another way I can think of doing it is using ng-if
:
我能想到的另一种方法是使用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>
But then I would be repeating almost the same comparison twice, which looks even worse. How would you guys approach this?
但后来我会重复两次几乎相同的比较,看起来更糟。你们怎么会接近这个?
4 个解决方案
#1
#2
2
Use double negation, it cast into boolean thus !!entry.url
will return true
if string is not empty.
使用double negation,它会转换为boolean,因此如果string不为空,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>
A good read What is the !! (not not) operator in JavaScript? and Double negation (!!) in javascript - what is the purpose?
好读了什么!! (不是)JavaScript中的运算符?和javascript中的双重否定(!!) - 目的是什么?
#3
2
You can create a custom directive that hides the complexity:
您可以创建隐藏复杂性的自定义指令:
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
-1
I would recommend having an ng-class="{'className': whenEntryURLisWhatever}" in your td, and make it change the css styles accessed, e.g:
我建议你的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;
}
Then just change what happens on ng-click within a function defined in your javascript code.
然后只需更改javascript代码中定义的函数中ng-click所发生的情况。
$scope.yourFunction = function(url){
if(!!url){
window.location = YourURL;
}
}
This would cut down on code repetition, as your html could now be:
这会减少代码重复,因为你的html现在可能是:
<tr ng-repeat="entry in tableEntries">
<td ng-class="{'className': !!entry.url}">
<span ng-click="yourFunction(entry.url)">{{entry.school}}</span>
</td>
...
</tr>
#1
5
You can try.
你可以试试。
<div ng-show="!link">hello</div> <div ng-show="!!link"><a href="{{link}}">hello</a></div>
But the ngSwitch
which you are using should be fine.
但是你使用的ngSwitch应该没问题。
#2
2
Use double negation, it cast into boolean thus !!entry.url
will return true
if string is not empty.
使用double negation,它会转换为boolean,因此如果string不为空,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>
A good read What is the !! (not not) operator in JavaScript? and Double negation (!!) in javascript - what is the purpose?
好读了什么!! (不是)JavaScript中的运算符?和javascript中的双重否定(!!) - 目的是什么?
#3
2
You can create a custom directive that hides the complexity:
您可以创建隐藏复杂性的自定义指令:
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
-1
I would recommend having an ng-class="{'className': whenEntryURLisWhatever}" in your td, and make it change the css styles accessed, e.g:
我建议你的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;
}
Then just change what happens on ng-click within a function defined in your javascript code.
然后只需更改javascript代码中定义的函数中ng-click所发生的情况。
$scope.yourFunction = function(url){
if(!!url){
window.location = YourURL;
}
}
This would cut down on code repetition, as your html could now be:
这会减少代码重复,因为你的html现在可能是:
<tr ng-repeat="entry in tableEntries">
<td ng-class="{'className': !!entry.url}">
<span ng-click="yourFunction(entry.url)">{{entry.school}}</span>
</td>
...
</tr>