javascript - 循环构建菜单链接时检查是否有状态

Question

我正在尝试使用以下数组创建导航链接:

JS:

$scope.sidebarLinks = [
    {
        name: 'Dashboard',
        state: 'dashboard',

    },
    {
        name: 'Students',
        state: 'student.list'
    },
    {
        name: 'Organization',
        children: [
            {
                name: 'School Profile',
                state: 'schoolProfile.detail',
            },
        ],
    },
]

HTML:

<ul>
  <li ui-sref-active="active" ng-repeat="x in sidebarLinks">
    <a ui-sref="{{x.state}}"></a>
  </li>
</ul>

由于“组织”的状态未定义，因此 ui-sref 为空。 因此出现错误:

Error: Invalid state ref ''

我在以下答案中发现了某种黑客:

How to achieve that "ui-sref" be conditionally executed?

是否有某种(黑客)方法可以解决问题而无需为此创建新函数或 Controller ？

Answer 1

如果您不希望有其他功能，则可以使用 ng-if 提供一个带有 ui-sref 的链接(如果状态已设置)，如果状态未定义，则可以使用没有的链接.

或者，如果未使用 {{x.state || 定义状态，则可以默认为另一个状态。 myOtherState }}

由于您的组织中有 child ，我想 ng-if 变体最适合您，如果您希望显示 child ，并且这需要额外的 HTML。