让ng-show与Html5 <dialog>元素一起工作
ng-show是AngularJS框架中的一个指令，用于根据表达式的值来显示或隐藏HTML元素。而HTML5中的<dialog>元素是用于创建对话框的标签。
要让ng-show与<dialog>元素一起工作，可以通过以下步骤实现：
- 在HTML文件中引入AngularJS库和相关的CSS文件。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.min.css">- 在AngularJS应用程序中定义一个控制器，并在控制器中设置一个布尔类型的变量来控制<dialog>元素的显示与隐藏。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showDialog = false;
});- 在HTML文件中使用ng-show指令和<dialog>元素来实现条件显示。
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="showDialog = true">显示对话框</button>
<dialog ng-show="showDialog">
<h2>这是一个对话框</h2>
<p>对话框的内容...</p>
<button ng-click="showDialog = false">关闭对话框</button>
</dialog>
</div>在上述代码中，点击"显示对话框"按钮时，ng-click指令会将showDialog变量的值设置为true，从而使<dialog>元素显示出来。点击"关闭对话框"按钮时，ng-click指令会将showDialog变量的值设置为false，从而隐藏<dialog>元素。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，这里无法给出具体的链接。但腾讯云提供了一系列云计算相关的产品和服务，可以通过访问腾讯云官方网站来了解更多信息。
相关·内容
Html5对话框很简单。15年前就该去那儿了！
如何让ng-show与对话框一起工作(它不工作)？
<!DOCTYPE html>
<html ng-app="project">
<head>
<meta charset='UTF-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
浏览 2提问于2016-07-07得票数 0
回答已采纳
我有一个菜单项，当单击时会弹出一个子菜单。如果我再次单击它，它将关闭。这部分工作得很好。我的问题是，在不使用jQuery的情况下，当我单击页面上的其他位置时，如何让该子菜单关闭？
下面是用户点击的内容：
<div class="main-nav" ng-click="showDialog()" ng-hide="highlightItem()">
<a class="left" >Foo</a>
</div>
<div class="main-nav focus
浏览 1提问于2014-09-02得票数 2
我有一个简单的ng重复，只显示一半的项目。出于某种原因，我让它和ng秀一起工作，但不和ng-if一起工作。我不明白为什么？
这样做是可行的：
<li ng-repeat="item in items" ng-show="$index < items.length / 2">{{item}}</li>
这并不是：
<li ng-repeat="item in items" ng-if="$index < items.length / 2">{{item}}</li>
下
浏览 2提问于2015-09-05得票数 2
回答已采纳
1回答
在Html5中，在对话框组件中使用页眉、页脚或主元素在语义上正确吗？
我想要构建一个复杂的模式视图，在我的主页内容中有关于文章的选项。我想知道是否正确使用html5，如下所示
<dialog>
<header>
<h1>Title</h1>
<button> Save </button>
</header>
<main>
<!--modal view options-->
</main>
&l
浏览 2提问于2017-04-03得票数 0
我的任务是实现web portal的自动化测试。该产品目前正在使用Flex开发，但我们将在某个时候过渡到HTML5。我的主管们想要一个工具，它可以同时适用于Flex和HTML5。另一位实习生和我一直无法让Silk Test与Flex一起工作，我对存在哪些选择感到困惑。
我的问题：
有没有比SilkTest更合适的免费选择？
浏览 0提问于2012-05-24得票数 3
回答已采纳
我想要显示一些，当某个变量的值是-1的时候，像这样：，<div ng-show="{{pid==-1}}">something</div>，不是这样的，它是这样工作的：，work.but，<div ng-show="pid==-1">something</div>，.why，.why？
浏览 0提问于2017-03-25得票数 0
1回答
我尝试为我的扩展创建一个模态框。我有一个html5代码
<dialog>
<p>Window</p>
<button id="close">Close</button>
</dialog>
<button id="show">Open Modal Box</button>
和JS代码
var dialog = document.querySelector('dialog');
document.querySelector('#show&
浏览 1提问于2022-02-01得票数 0
回答已采纳
我知道这是个长标题^^
我使用的是MVC 4和JQuery版本1.8.2。
我正在JQuery对话框中加载一个JQuery，一切都很好。
最近，我想添加一些Javascript，在对话框中隐藏一个文本框，这里开始我的痛苦。
Javascript隐藏代码工作：
只有一次，如果我用$(This).dialog(‘close’)关闭对话框；
每次，如果我用$(This).remove()关闭对话框；
我不是JQuery / Javascript方面的专家，但我想了解发生了什么:)
这是我的密码：
$(function dialogLink() {
// Don't allo
浏览 1提问于2013-07-21得票数 0
回答已采纳
我正在努力进行AngularJS验证。下面是HTML5中的 (由于我的服务器端框架，它必须是有效的XML)：
<div ng-app="">
<form name="myForm" ng-controller="ValidationTest" novalidate="novalidate">
<input name="email" ng-model="myForm.email" type="email" required=&#
浏览 4提问于2013-08-01得票数 4
回答已采纳
我正在尝试自动测试一个移动应用程序，这是嵌入在本地应用程序框架中的HTML5。我使用以下代码来获取Instrument中的元素
UIALogger.logStart("Log elements in the landing page");
UIATarget.localTarget().logElementTree();
UIALogger.logPass("done");
它会将HTML5组件显示为UIAWebView。但是，例如，如果HTML中有一个链接，而我想要单击，我只能通过位置知道它。有没有什么方法可以调用来获取HTML5中的标签？
非常感谢!
浏览 2提问于2013-03-14得票数 2
1回答
我有这个html：
<div ng-if="true">
<div ng-show="hideMe">
<div class="random" ng-include="'template.html'"></div>
</div>
</div>
<br>
<button ng-click="hideMe = false">hide</button>
浏览 3提问于2017-09-18得票数 0
回答已采纳
1回答
我正在尝试用AngularJs验证一个表单。我是Angular的新手，我在弄清楚如何让提交的值工作时遇到了麻烦。
<div ng-show="signup_form.$submitted || signup_form.firstname.$touched">
....
</div>
我的印象是，我所需要的就是使用ng-sumbit来让它工作。有什么东西我需要包括在我的控制器中。我使用的是angular 1.3.2，但我也尝试了使用1.3.8
更新：
我的表单很长，但这里是表单的完整简写版本。我将它与bootstrap结合使用。
<form
浏览 2提问于2015-01-12得票数 0
我需要这样做才能使用HTML5中的HTML5标记，我希望我站点上的每个<dialog>都可以使用controller和controllerAs语法访问自己的唯一作用域。
这是我认为有用的东西。
Javascript
\\Dialog Controller
function dialog () {
return {
scope: {},
controller: function () {
this.test = 'Dialog Test';
},
controllerA
浏览 2提问于2015-08-17得票数 0
1回答
那么，如果我在输入上有一个HTML5 'required‘属性，那么如果输入由于ng-show没有触发它而没有显示，那么有没有办法不会触发'required’属性呢？
浏览 0提问于2015-11-05得票数 0
<div r6-modal-dialog class="r6modal-dialog--medium">
我想在class中添加if语句
我知道我可以这样做：
<div r6-modal-dialog ng-show="!data.selectedValue" class="r6modal-dialog--medium">
<div r6-modal-dialog ng-show="data.selectedValue" class="r6modal-dialog--small">
浏览 0提问于2016-08-12得票数 1
回答已采纳
在这种情况下，我只需要显示没有html标记的内容，但据我理解，没有html标记就找不到任何东西。
<span ng-show="expression">{{data}}</span> //output <span>data</span>
但是我想在没有的情况下向文本显示span标记
ng-show="expression" {{data}} //output data
浏览 0提问于2016-11-01得票数 0
1回答
将css动态应用于模式？
、、、、
我在一个模式上工作，这里是它的html代码。如果您查看style标记，我基本上覆盖了.model-content css类和.modal-dialog css类。
<script type="text/ng-template" id="Data.html">
<style>
.modal-content {
width: 100%;
height: 100%;
overflow-y: auto;
margin: 120px 0px 0px 0px;
}
浏览 12提问于2017-07-21得票数 0
5回答
我的要求可能太高了，但我正在尝试让jQuery模板中的html5元素在ie8中工作。我使用的是head.js，也就是注册html5元素，我也尝试过html5shiv，但没有成功。页面中还有其他html5元素可以很好地工作，但是如果我在模板中使用html5元素，jquery模板系统不会返回任何内容。
下面是我的一个模板的示例：
<aside>
<script id="sidebar-template" type="text/x-jquery-tmpl">
<section>
<
浏览 0提问于2011-03-03得票数 8
我有一个指令，我这样使用：
<dir model="data"></dir>
该指令有一个独立的作用域。
scope :{
model:'='
}
现在，我尝试使用页面$scope的另一个属性对该指令使用ng-show，如下所示：
<dir ng-show="show" model="data"></dir>
但是它不起作用，因为该指令试图在其自己的作用域中查找show属性。
我不想让指令知道它的容器可能选择隐藏它的事实。
我发现的解决办法是将指令包装在<div>中，
浏览 0提问于2013-05-25得票数 23
回答已采纳
我有一个网页需要jQuery和Mootools的功能。在将jQuery.noConflict();添加到脚本中时，解决了这两个库之间的冲突。
但我也希望在jQuery用户输入验证失败时弹出一个jQuery对话框。
jQuery.noConflict();
function OnButton1()
{
var noOfChecked = jQuery("input:checked").length;
if(noOfChecked > 0)
{
jQuery( "#dialog" ).dialog({
modal: true
浏览 3提问于2012-01-12得票数 1
我正在使用为我们的项目绘制图像。对于预定义的形状，如line，pie，我可以通过添加工具提示.
然而，我们有一些图像是通过Html5画布API绘制的，比如。我想为红色矩形添加一个工具提示，为空白区域添加另一个工具提示。有图书馆让它工作吗？
浏览 6提问于2014-02-07得票数 0
回答已采纳
我想这样做：
ng-show="node.status | limitTo:1:1 == 1"
在一个简单的角度表达式中，它可以工作：{{ node.status | limitTo:1:1 }} =1
我不能让它在ngShow或ngIf语句中工作..。
浏览 3提问于2017-08-16得票数 1
回答已采纳
7回答
我试图在中插入一些html标记，但是行之间有很大的差距。
这是我的HTML代码
<h5>Help Message</h5>
<pre ng-show="panel.info_mode == 'markdown'" ng-bind-html="panel.help_message | markdown"> </pre>
<pre ng-show="panel.info_mode == 'text'" ng-style='panel.styl
浏览 8提问于2014-09-04得票数 1
回答已采纳
这就是我计划要做的：
初始标记：
<div class="col-md-3 col-sm-3 col-xs-6">
<span class="control-label"><b>Doc. Number:</b></span>
<input name="documentNumber" class="form-control" type="text" ng-model="document.number" smrh-required /&g
浏览 0提问于2014-01-29得票数 0
1回答
我想知道如何基于HTML5 DOM-方法测试功能。比如新的对话框-API。
考虑以下功能；
function show(dialog)
{
if(typeof(dialog.showModal) !== "function")
throw new Error("Update your browser");
dialog.showModal();
}
我想确保
方法不可用时引发错误。
如果可用，则调用dialog.showModal。
目前，我正在使用firefox和chrome启动程序运行业力+茉莉花，但它们似乎都
浏览 2提问于2015-05-29得票数 1
2回答
我有一个在Azure上托管的角应用程序。我没有访问控制器的权限，但是我可以更改HTML。我想添加一个javascript函数来将小数转换成分数。我能够让代码在按下按钮时工作，但是当页面加载时，我无法获得要调用的javascript函数。如果我试图调用相当于document.ready的函数，那么当我试图查找文本元素时，就会得到一个null。我对角度还不熟悉，但我猜当document.ready被调用时，它还没有完全填充页面上的数据元素，但是按一下按钮的时间到了。如果不单击按钮，如何才能使这些代码正常工作？
以下是HTML代码：
<md-dialog aria-label="{{
浏览 1提问于2016-03-08得票数 0
1回答
为什么request.getParameter("termin");返回NULL .The连接，而my Databse的语句在更简单的版本中工作得很好。这是JSp/JAva代码：
int result = 0;
if(request.getParameter("submit") != null) {
String name = new String();
if(request.getParameter("termin") != null) {
name = request.getParameter("te
浏览 2提问于2014-12-31得票数 1
回答已采纳
2回答
当我点击“添加新项目”按钮时，我想要显示一个弹出式表单。然后，如果我单击此表单外，我希望它隐藏自己。要显示/隐藏表单，我使用ng-show指令。为了监视外部单击，我使用第三方角指令，但是有一个问题--这个指令开始在页面加载上工作，当我单击"Add“按钮时，它会立即调用我的关闭函数，该函数反过来将布尔属性设置为false值，而ng-show隐藏了一个表单.
HTML：
<button ng-click="vm.displayDialogAddNewItem()>Add New Item</button>
<div class="new-ite
浏览 4提问于2015-05-04得票数 2
回答已采纳
我有一个ng-repeat，它有一个按钮，该按钮具有在该ng-repeat中切换一个ng-show元素的功能。
在类movie_option跨度内部有一个ng-click=toggleInfo($index)
div additional_info有一个显示或隐藏元素的ng-show。
<ul ng-cloak="showResult">
<li class="search_results" ng-repeat="movie in movies | orderBy: '-release_date'
浏览 19提问于2016-08-01得票数 4
回答已采纳
2回答
我有一些表单与数据验证在我的角度应用程序。所有表单包含相同的验证消息，如下所示：
<span class="formValidationError" ng-show="myForm.customViewName.$error.required">Required!</span><br>
<span class="formValidationError" ng-show="myForm.customViewName.$error.minlength"
浏览 2提问于2014-07-01得票数 1
我必须将输入集中在加载一个模式时，但是如果我使用html5属性autofocus，它似乎不起作用。有没有可能让它工作呢？
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">
{{'ticketbundle.busroutedetail.dialog.labels.buslinename'
| translate }}<span cla
浏览 2提问于2017-09-29得票数 4
我有一个bootstrap模式，如下所示。我正在使用ng-show来触发模式。弹出窗口在我第一次加载它时出现，当我关闭弹出窗口并重新运行第二次时，即使x.length为0，弹出窗口也不会出现
<div class="modal fade in" id="modal" aria-hidden="false" style="display: block;" role="dialog" ng-show="x.length==0" data-toggle="modal" data-ta
浏览 34提问于2017-08-08得票数 1
回答已采纳
我正在尝试在中创建一个。我正在努力处理事件委托--我有能力让时间选择器在表单之外工作，但不能在表单内部工作。
我当前的代码，它没有时间选择器弹出窗口：
$(document).ready(function() {
$('#timepick').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
$(function() {
$( "#dialog-form" ).dialog({
autoOpen: false,
h
浏览 0提问于2012-11-29得票数 0
回答已采纳
你好，不管是谁读的这篇文章:P。
我正在为我们在工作中开发的几个新站点进行自动化，虽然到目前为止我已经完成了其中的大部分工作，但我不知道处理这个特定场景的最佳方法是什么。
该网站是一个店面与通常的付款表格提交信用卡付款，然后一个加载屏幕时，系统让您知道操作是挂起，是否已完成或失败。它使用的是一个响应性的框架，它的名字不幸地让我现在无法理解(角质？)
有3行，我想要一些建议如何处理。
首先是等待加载图像消失。这是生成它的HTML行：
<div class="poll-loader-spinner ng-scope" ng-show="editCtrl.pollInf
浏览 2提问于2015-10-14得票数 1
回答已采纳
5回答
如何在HTML5对话框中淡出？所谓对话框，我指的是HTML5 <dialog>标记()。
我尝试了以下方法()，但由于某种原因，转换不起作用。
<dialog id="myDialog">
Test
</dialog>
<script>
document.getElementById('myDialog').show(); // note that this is a method of <dialog>, this is not a jQuery method.
</scr
浏览 3提问于2014-07-28得票数 14
我想在渲染视图之前隐藏angular应用程序。我可能不得不用style="display:none":来隐藏它
<div id="app-content" style="display:none">
<!-- Angular app HTML code -->
</div>
我已经尝试过了，它不会工作，因为Angular不修改style.display的值。
<div id="app-content" style="display:none" ng-show
浏览 4提问于2015-04-29得票数 4
我想使用HTML5，因为它也支持Iphone，而且我真的很喜欢它的功能，但是如果它不能完全兼容所有的浏览器，我该怎么办？特别是IE家族。那么有没有办法通过添加一些js脚本e.t.c。因此，HTML5及其js在IE中也可以正常工作，就像它可以在其他浏览器上工作一样。这样我就可以在不考虑浏览器兼容性的情况下使用它。在html5中也有很多游戏引擎，但是如果大多数IE浏览器都不支持呢？或者有人可以告诉我，在不考虑兼容性问题的情况下，我可以利用html5的多少优势？
提前感谢
浏览 1提问于2011-02-01得票数 32
回答已采纳
我正在使用winjs库、html5、jquery等开发Windows8应用程序。
我正在尝试根据需要在ListView对象中设置至少一个项目的选择，这可能吗？
我知道您可以通过html5控件的html5使用保留字"required“做到这一点，但我不知道如何使用现成的winjs库做同样的事情。
任何帮助？
浏览 1提问于2013-07-27得票数 0
1回答
背景：
我正在做一个注册表格，用户可以在其中输入关于无限数量的人的信息。每个人都是作为json对象输入的，并由字段组成，如下所示。
addPerson: function() {
//Create a json object for this person.
var person = {
id: $("#dialog").data("person"),
fname: $("#dialog input[name=pfname]").attr("val
浏览 2提问于2013-09-04得票数 2
我的问题是，当我尝试在我的输入类型日期，即birthdate，当我输入日期(4/29/2016)时，所需的仍然显示，它不允许我提交我的表格。当我试图删除我的birthdate输入中所需的属性时，它工作得很好.但我想要的是让birthdate .我不知道为什么它在约会时不能工作，而在其他需要的输入(如full_name、gender和email )上工作得很好。
由于html5在Mozilla和IE中不工作，所以我使用插件来工作。
<!--HTML5 Date and Month Input Compatibility-->
<!-- cdn for moder
浏览 3提问于2016-04-29得票数 1
2回答
在html5定义下，使用标签的"for“值作为普通div元素的id是否有效(例如，我制作了一个封装在div中的自定义下拉列表实现)
如果可能，请让我知道，
托马斯
浏览 2提问于2012-07-29得票数 27
回答已采纳
2回答
html5支持input[type=text]元素的占位符属性，但是我需要处理不兼容的浏览器。我知道有上千个插件用于占位符，但我想创建1001个。
我能够获得input[placeholder]元素的句柄，但尝试获取占位符属性的值时返回的是undefined - $("input[placeholder]").attr("placeholder")。
我使用的是jquery 1.6.2。
这是。我修改了代码，以便在与html5兼容的浏览器中工作，只是为了测试目的。
html
<input type="text" name="emai
浏览 0提问于2011-08-24得票数 55
回答已采纳
我的任务是让干净的滚动到另一个屏幕然后按下图标并显示弹出窗口，我想使用ViewPager在两个页面之间进行干净的右滚动(滑动)，然后使用Dialog显示弹出窗口，我找不到任何关于如何在两个布局之间实现ViewPager的工作示例，有人有工作示例吗？？
谢谢。大卫
浏览 0提问于2011-08-30得票数 22
回答已采纳
3回答
如果notesOpened变量为真，我将使用ng-show="!notesOpened"来隐藏一个div。然而，当它被隐藏时，它会打乱布局。有没有办法让ng-show以与css属性visibility:hidden相同的方式工作？以便隐藏的div周围的所有div元素都保留在同一位置
浏览 0提问于2014-04-14得票数 23
回答已采纳
1回答
在以下代码中，rel=""的HTML5替代方案是什么：
<span class="gte" rel="gte">
如果没有rel=""属性，页面将不起作用，也不会验证是否符合HTML5。
浏览 11提问于2013-07-03得票数 0
1回答
我们使用的是角-谷歌图表模块，我们有两个google LineChart‘图，在切换时，其中一个通过设置ng-show=标志来显示，如果它们都被设置为ng-show=true，那么我可以看到两者都被正确绘制。但是如果我用标志控制ng显示，那么我就会得到以下错误。
Chart not displayed due to error: c is null. Full error object follows. ng-goog...hart.js (line 196) Object { id="google-visualization-errors-0", message="
浏览 3提问于2015-06-03得票数 0
我正在使用AngularJs ng-show，ng-hide作为控件，在不同的情况下，我也在javascript中使用show()，hide()。但只有ng-show和ng-hide在工作，不允许jQuery show()和hide()。
对于下面的div，我使用了ng-show，它工作得很好：
<div class="generic_error_message" id="genericmsg" ng-show="(QuoteNew.$invalid && submitted) ||(QuoteNew.Birthdate.$pris
浏览 1提问于2013-11-15得票数 0
我正在使用Vuejs做一个小项目，我有一些分期付款的简单条-vue-它工作得很好，但不是在一个模式内。
这是我的密码：
<b-modal v-model="showRightBar" title="Add Contact" modal-class="right">
<simplebar class="h-100">
<div style="height:500px;">hello</div>
</simpleb
浏览 6提问于2021-06-30得票数 1
3回答
所以，我正在用HTML5做一个游戏，我想用CocoonJS把它转换成一个应用程序。我有用DOM制作的带有HTML内容的菜单，比如绑定到脚本的按钮。然后，主要的游戏是在Canvas元素中。如果我有画布以外的其他元素，它可以与CocoonJS一起工作吗?如果没有，有没有在画布中绘制菜单的好方法？
浏览 3提问于2014-03-04得票数 2
我不确定我在这里做错了什么，但我的对话框似乎没有利用我的部分。这就是我布置对话框的方式： Stackblitz Example <ng-container ngProjectAs="[mat-dialog-title]">
<app-dialog-header header="Command Line Arguments"></app-dialog-header>
</ng-container>
<div mat-dialog-content fxLayout="column" fxL
浏览 15提问于2021-10-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
