javascript - 如何在 Angular Strap 的下拉菜单的 href 中使用 Angular 表达式？

Question

我在我的一个项目中使用 AngularJS 和 Angular Strap 插件。在页面上我有一张 table 。其中一列包含一些链接。

点击链接后，我会弹出 Angular Strap 的下拉菜单(作为上下文菜单)。

此菜单包含两个项目:

• 详细信息，
• 董事会。

单击详细信息项目会打开 Angular Strap 的一侧(显示一些数据) - 这个运行良好。

问题是，第二个项目应该重定向到特定页面(使用下拉列表的 href 属性)。我的问题是 - 如何在此 href 属性中使用 Angular 表达式？

我的 View 代码的一部分 - 带下拉菜单:

<button type="button" class="btn btn-link"
    ng-click="selectGroup(group)"
    data-html="1"
    data-animation="am-flip-x"
    data-placement="bottom",
    bs-dropdown="dropdown">
        {{ group.name }}
</button>

Bs-dropdown Controller 的下拉定义:

$scope.dropdown = [
    {
        text: "Details",
        click: "showDetails()" // Opens up Angular Strap's aside.
    },
    {
        text: "Board",
        href: "/group/{{ $scope.group.number }}" // Not evaluated.
    }
];

点击“Board”下拉菜单的项目会重定向到类似以下内容的内容:“127.0.0.1:8000/#/group/{{group.number}}”，而不是(即)“127.0.0.1:8000/#/group”/2”。

作为解决方法，我创建了另一个方法(即 openBoard()，如下所示:

var openBoard = function() {
    var groupNumber = $scope.group.number;
    window.location.href="127.0.0.1:8000/#/" + groupNumber;
}

在“Board”项目的点击中调用此方法是有效的，但会导致一些其他问题等等 - 这不是我想要的方式(语义上不正确)。

最后还有一件事。每当页面加载(并且 Controller 已初始化)时，存储在 $scope.group 中的值都是未定义的。每当单击组链接(来自上述表格)(以及显示下拉列表之前的一刻)时，我都会设置一个正确的值。

有人知道如何将 Angular 表达式与 Angular Strap 的下拉菜单(在 href 中)一起使用吗？

Answer 1

由于 $scope.group 成员在创建下拉数组时启动时不可用，这将导致 href: "/group/{{ $scope.group.number }}"将此设置为href:“/group/undefined”。因此，我建议您最初加载具有一个值的下拉列表，

$scope.dropdown = [
    {
        text: "Details",
        click: "showDetails()" // Opens up Angular Strap's aside.
    }
];

每当获取组值时，请分配第二个下拉选项

$scope.dropdown.push({
    text: "Board",
    href: "/group/" + $scope.group.number
});

希望这个解决方法能够帮助您，谢谢。