Angular Material - 当我关闭菜单时如何关闭/隐藏我的 md-select?

2024-01-03

我在用md-menu-item我的元素md-menu。菜单由按钮激活 - 一切正常,并且都使用默认的 Angular JS。

每个内md-menu-item I have md-select输入。它看起来像这样:

...

<md-menu-item>
    <md-input-container>
        <label>My Label</label>
        <md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
            <md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
                {{foo.name}}
            </md-option>
        </md-select>
    </md-input-container>
</md-menu-item>

...

如果我通过单击按钮打开菜单 - 如果我什么都不选择,然后单击<md-select>(屏幕上的任意位置)md-menu像它应该的那样消失,一切都很好。

如果我点击其中之一<md-select>元素,然后单击屏幕中的某个位置<md-menu>关闭了,但我仍然可以看到<md-select>元素。

有没有办法在菜单项中“嵌套”选择元素,以便当我关闭菜单项时,所有子元素也会关闭?

这是一个代码笔示例 http://codepen.io/damonjentree/pen/yaKWyQ我所看到的。

感谢您的任何建议!


当您在框外单击时隐藏 md-select 。我在用'$mdSelect.hide()'关闭 md-select 下拉菜单。我只是将以下 3 行放入我的主控制器中。

    $(document).bind('click', function (event) {
        $mdSelect.hide();
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular Material - 当我关闭菜单时如何关闭/隐藏我的 md-select? 的相关文章

随机推荐

  • 在 NSTableView 中添加页脚

    我正在为 Mac 开发 Cocoa 应用程序 在应用程序中 我必须向表格添加页脚 以添加和删除行 如附图所示 这种类型的页脚视图是否有默认控件 如果没有这样的默认控件 我就必须使用图像 没有这样的默认控件 您可以创建这样的自定义控件 也可以
  • PL/SQL - where 子句中的可选条件 - 没有动态 sql?

    我有一个疑问 并非所有条件都是必要的 以下是使用所有条件时的示例 select num from select distinct q num from cqqv q where q bcode 1234567 this is variabl
  • JAXB 编组 - 扩展现有类

    我需要使用 JAXB 通过 XML 创建一系列 Java 对象 这些对象都扩展已创建的公共基类 不使用 JAXB 例如 假设我尝试生成以下 JAXB 类 Penguin xml gt Penguin java Robin xml gt Ro
  • 为什么 Ranges 库中的 std::views::take_while 需要 const 谓词?

    TL DR 我正在玩ranges以及相应的范围适配器来自范围库 https en cppreference com w cpp ranges 两个范围适配器std views take while https en cppreference
  • 使用 jQuery 实现高效的 AutoSuggest?

    我正在努力构建一个 jQuery AutoSuggest 插件 灵感来自 Apple 的聚光灯 这是一般代码 document ready function q bind keyup function if this val length
  • 查找匹配值的行号

    我一直在尝试几种不同的方法来查找行号bingo 列出并用星号分隔 但似乎都不起作用 我究竟做错了什么 在所有情况下 我都尝试寻找 Bingo 和 Bingo Sub Find Bingo Dim wb As Workbook Dim ws
  • 如何将 NUnit 作为 ASP.NET MVC 的测试框架选项添加到 Visual Web Developer 2008 Express?

    根据专业ASP NET MVC 1 0 http weblogs asp net scottgu archive 2009 03 10 free asp net mvc ebook tutorial aspx 第 8 页 如果您使用 VS
  • 创建一个接受回调并返回 Promise 的 api

    因此 我正在尝试升级现有的 api 以支持 Promise 但我想保持向后兼容性 所以 假设这是我的 api module exports deliverPost function callback someAsyncFunction fu
  • 从 ASP.NET MVC2 将视频文件提供给 iPhone

    我正在尝试将视频文件从 ASP NET MVC 提供给 iPhone 客户端 该视频的格式正确 如果我将其放在可公开访问的网络目录中 它就可以正常工作 我读到的核心问题是 iPhone 要求您有一个可恢复的下载环境 让您可以通过 HTTP
  • .htaccess 用于 cakephp

    我正在尝试让 CakePHP 应用程序正常工作 为此 我设置了一个全新的 Debian 安装 更新了配置并将所有内容放入 var www 中 其中包含以下内容 app cake htaccess index php vendors htac
  • 有人可以结束“离开应用程序”的痛苦吗?

    这个问题到处都被问过很多次了 并且没有回复 答案解释它应该如何工作 根据文档 http developers facebook com docs authentication http developers facebook com doc
  • 在 Pycharm 中捕获 Pandas DtypeWarning

    对于 Python 来说相对较新 在 PyCharm Professional 中处理 Pandas 异常方面面临挑战 我正在尝试使用 Pandas 读取 CSV import pandas as pd df pd read csv fil
  • 如何使用 RegExp 替换除双引号之外的所有标点符号

    我正在尝试进行一些字符串清理 我想删除字符串中的所有标点符号except双引号 下面的trimPunctuation 函数可以很好地从字符串中删除所有标点符号 有谁知道如何删除除双引号之外的所有标点符号 private String tri
  • Angular - Karma - ngrx - 没有商​​店提供商

    在我的一个单元测试中 我试图模拟 ngrx store 我已经在另一个规范文件中成功使用了该技术 但是当尝试在这个规范文件中使用它时 我收到一条注入错误 No provider for Store 以下是spec文件中的相关代码 befor
  • Backbone.js 路由器匹配可选参数

    我正在尝试创建一个可以匹配可选参数的主干路由器 考虑以下代码 routes jobs jobs jobs p page jobs jobs job job id jobs jobs p page job job id jobs jobs f
  • 如何按日期对 JavaScript 数组进行排序

    例如在我的数组中我有这个数据 var mydate 2016 10 01 2016 09 13 2016 09 05 2016 09 09 2016 10 02 这个该如何排序呢 我想要这个输出 2016 09 05 2016 09 09
  • WPF 验证规则更新

    我的视图上有一个文本框 它有一个验证规则 public class EmptyStringRule ValidationRule public override ValidationResult Validate object value
  • 在 Pycharm 中看不到推送的提交

    我已经做出了一些提交 但我看不到它们的推送 我读过这可能与没有遥控器有关 但这是命令行的结果 git remote origin UPDATE git 状态命令结果 git status HEAD detached from 5235085
  • Pspell 仅使用自定义词典

    像这个帖子这样的问题 如何禁用 Pspell 中的默认英语词典并仅使用自定义词典 https stackoverflow com questions 16714362 how to disable default english dicti
  • Angular Material - 当我关闭菜单时如何关闭/隐藏我的 md-select?

    我在用md menu item我的元素md menu 菜单由按钮激活 一切正常 并且都使用默认的 Angular JS 每个内md menu item I have md select输入 它看起来像这样