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>

正如您所看到的那样，除了在网址开头附加的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最有条理地将字符串附加到标记属性的方法

2 个答案: