Question

    <ul>
        <li ng-repeat="channel in Board.Channels">
            <a ng-if="channel.key == ''" ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}">{{channel.title}}</a>
            <a ng-if="channel.key != ''" ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}?channel={{channel.key}}">{{channel.title}}</a>
        </li>
    </ul>

两个链接之间的唯一区别是一个有查询参数，另一个没有。

有没有办法在不使用两个<a ng-if="">条件标签的情况下编写它？

Answer 1

角度绑定{{}}可以包含代码或范围变量。在这种情况下，您可以使用有角度的笨拙三元运算符来绑定{{boolean && ifTrueValue || ifFalseValue}}，您可以将其视为与(boolean) ? ifTrueValue : ifFalseValue类似

<ul>
    <li ng-repeat="channel in Board.Channels">
        <a ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}{{(channel.key == '') && ''|| '?channel='+ channel.key}}">{{channel.title}}<span class="cgCount">{{channel.count}}</span></a>
    </li>
</ul>

Answer 2

我有点意思，但我明白了。

    <ul>
        <li ng-repeat="channel in Board.Channels" ng-init="query= channel.key != '' && '/?channel='+channel.key || ''">
            <a ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}{{query}}">{{channel.title}}</a>
        </li>
    </ul>

Angular在表达式中不支持?:运算符，但它允许您执行上述布尔结果。

如何仅使用一个<a> tags?</a>来编写此Angular HTML

2 个答案: