如何在 Angular Strap 下拉列表的 href 中使用 Angular 表达式？

Question

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

单击 link 后，我会弹出 Angular Strap 的下拉菜单（作为上下文菜单）。

此菜单包含两项：

详情，
棋盘。

单击详细信息项目打开窗口 Angular 放在一边（显示一些数据）- 这个效果很好。

问题是，第二项应该重定向到特定页面（使用下拉菜单的 href 属性）。我的问题是 - 如何在此 href 属性中使用 angular 表达式？

我的部分视图代码 - 带有下拉菜单：

<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 的下拉列表定义：

$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" 项目的点击中调用此方法是有效的，但会导致一些其他问题和更多 - 这不是我想要的方式（语义上不正确）。

最后还有一件事。每当页面加载（并且控制器已初始化）时，存储在 $scope.group 中的值是未定义的。每当单击 link 组（来自上面提到的 table）时（以及显示下拉列表前的片刻），我都会设置一个正确的值。

有人知道如何将 Angular 表达式与 Angular Strap 的下拉列表（在 href 中）一起使用吗？

Answer 1

我认为你必须为此更改 {{ $scope.group.number }} /group/group.number

Answer 2

由于在创建下拉列表数组时 $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
});

希望这个变通办法能帮到你，谢谢。

如何在 Angular Strap 下拉列表的 href 中使用 Angular 表达式？

How to use Angular expression in Angular Strap's dropdown's href?

javascript

angularjs

drop-down-menu