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

【问题标题】：How to use Angular expression in Angular Strap's dropdown's href?如何在 Angular Strap 的下拉列表中使用 Angular 表达式？
【发布时间】：2015-05-09 07:30:53
【问题描述】：

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

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

此菜单包含两个项目：

详情，
板。

单击详细信息项目打开 Angular Strap 旁边（显示一些数据） - 这个运行良好。

问题是，第二个项目应该重定向到一个特定的页面（使用下拉的 href 属性）。我的问题是 - 如何在这个 href 属性中使用角度表达式？

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

<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 中的值都是未定义的。每当单击组链接（来自上述表格）时（以及在显示下拉列表之前的片刻），我都会设置一个适当的值。

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

【问题讨论】：

你为什么不试试href: "/group/" + $scope.group.number" 。
请看上面描述的最后一节。正如我所提到的 - 一开始的 $scope.group 是未定义的。我尝试了与您类似的方法，但没有成功（空异常）。即使使用这样的方法： var groupId = function(group) { if(group === null) return "";返回组数； };我认为，在更新 $scope.group 之后，应该更新视图（并且上述方法应该返回正确的值）。但它也不起作用。
在组被分配后添加第二个元素到下拉数组{ text: "Board", href: "/group/"+$scope.group.number }
什么时候得到group的值？
直到现在我还没有考虑过编辑我的下拉数组。因此，我最终得到了另一种方法 prepareDropdown() ，该方法在选择组（以及我在其中设置正确的 href 属性）之后执行 - 类似于您提供的方法。 @pankajparkar 您不应该添加您的推荐作为答案吗？然后，我可以将其标记为正确。

标签： javascript angularjs drop-down-menu

【解决方案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
});

希望这项工作对您有所帮助，谢谢。

【讨论】：

由于 push() 方法总是会添加另一个下拉项（每次单击）我只是更喜欢重新初始化整个 $scope.dropdown 数组（因为我只需要两个项目 - 并且只有一个“Board”物品）。但总的来说，这是一个正确的答案。
是的..在你的情况下重新初始化会更好..谢谢:)

【解决方案2】：

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

【讨论】：

不工作。解析为“127.0.0.1:8000/#/$scope.group.number”。