Angular JS 有条件地将字符串附加到标签属性的最干净的方法

Question

我有一个关于 angularJS 的新手问题：

我有两个非常相似的 <a> 标签来显示它们 href 仅当设置了变量 foo 时才取决于：

如果 foo == null:

<a ng-href="#/bar/{{col.slug}}">{{col.title}}</a>

其他

<a ng-href="#/{{foo}}/bar/{{col.slug}}">{{col.title}}</a>

如您所见，除了在 url.

开头附加的 foo 变量外，标签几乎相同

我知道有 ng-show 和 ng-hide、ng-if 或 ternary operation 等命令。

这个操作怎么最干净？

谢谢！

Answer 1

您可以调节您的代码：

<a ng-href="#/{{ foo != null ? foo + '/' : ''}}bar/{{col.slug}}">{{col.title}}</a>

或者你可以使用 ngShow:

   <a ng-show="foo == null" ng-href="#/bar/{{col.slug}}">{{col.title}}</a>
   <a ng-show="foo != null" ng-href="#/{{foo}}/bar/{{col.slug}}">{{col.title}}</a>

我更喜欢内联条件，觉得它更容易阅读

Answer 2

发送给浏览器的数据越少越好。

 <a ng-href="#/{{ !!foo ? foo + '/' : '/'}}bar/{{col.slug}}">{{col.title}}

Angular JS 有条件地将字符串附加到标签属性的最干净的方法

Angular JS cleanest way to conditionally append string to tag attribute

javascript

if-statement

href

angularjs

angularjs-ng-href