angularJS ng-attr-表达式

Question

你好，我正在研究导航方向。 如果有任何子条目，我必须添加属性“uib-dropdown”

<li ng-attr-uib-dropdown="{{!!tree[$index].children ? '' : undefined }}" ng-repeat="nav in tree" ng-class="{ 'active' : isActive(nav.path) }">

变量“!! tree [$ index] .children”将返回true或false。 从2小时开始我就在google之后，但是我无法看到如何以正确的方式使用这个表达式。

因为现在它将uib-dropdown添加到每个li。无论是真还是假都无关紧要。

我希望有人可以帮助我。 感谢

Answer 1

因为我们对tree[$index].children的回答可能是真实的，如果tree[$index].children有答案，那么它将是真的，如果它是空的或未定义的，那么它将是假的/ falsey。不需要!!或三元运算符。

<击> <li ng-attr-uib-dropdown="{{tree[$index].children}}">
您还可以使用||（或运算符）来更好地说明＆＃34; falsey＆＃34;未定义的。
<li ng-attr-uib-dropdown="{{tree[$index].children || undefined}}">

<小时/> 创建了plunkit。在这里，我使用了ng-if，如果数组＆＃34; food＆＃34;存在，然后允许下拉列表。如果你删除＆＃34;食物＆＃34;数组，链接在没有下拉列表的情况下被替换。

<a href ng-if="!food">
    Click me, no dropdown, yo!
</a>

<!-- Simple dropdown -->
<span ng-if="food" uib-dropdown on-toggle="toggled(open)">
    <a href id="simple-dropdown" uib-dropdown-toggle>
        Click me for a dropdown, yo!
    </a>
    <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
        <li ng-repeat="choice in items">
            <a href>{{choice}}</a>
        </li>
    </ul>
</span>