[英]Calling a function onclick in AngularJs
My code has following structure:我的代码具有以下结构:
<div>
/ child tags and are loaded into a load-div which is in main.html on events such as click file1.html ...(所有其他 html 文件)- 仅包含<div>
/ 子标签,并在单击等事件时加载到位于 main.html 中的 load-divnow in one such file say file3.html, I have a checkbox.现在在一个这样的文件中,比如file3.html,我有一个复选框。 onclick of that checkbox I want to open a modal window - a form that will be submitted.单击该复选框我想打开一个模态窗口 - 将提交的表单。 Now here is my code现在这是我的代码
file3.html文件3.html
<div>
<input type="checkbox" name="your-group" value="unit-in-group" onclick="toggleModal();"/>Unit-in-group
<modal title="some title" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</modal>
</div>
now I have written follwing code in the main main controller declared in main.hml现在我已经在 main.hml 中声明的主控制器中编写了以下代码
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
The expected behaviour is when my file3 is loaded I will see a check box on the screen and as I click it, it will open a modal window but instead I see modal form fields on the same page where I see checkbox.预期的行为是当我的 file3 加载时,我会在屏幕上看到一个复选框,当我单击它时,它将打开一个模态窗口,但我在看到复选框的同一页面上看到模态表单字段。 and when I click it I get angular exception that showModal is not defined.当我点击它时,我得到了未定义 showModal 的角度异常。
Where am I going wrong?我哪里错了?
Just need to use Angular syntax: ng-click
for the click and ng-show
for the visibility.只需要使用 Angular 语法: ng-click
用于单击, ng-show
用于可见性。
<input type="checkbox" name="your-group" value="unit-in-group" ng-click="toggleModal();"/>Unit-in-group
<modal title="some title" ng-show="showModal">
Other options:其他选项:
You could also use ng-change
instead of ng-click
, which in this case wouldn't make much difference.您也可以使用ng-change
而不是ng-click
,在这种情况下不会有太大区别。
Or you could use ng-model
( ng-model="showModal"
) and get rid of your toggle function entirely Example .或者您可以使用ng-model
( ng-model="showModal"
) 并完全摆脱您的切换功能Example 。
Another approach would be to use the ngChange directive to detect that the checkbox got checked另一种方法是使用ngChange 指令来检测复选框是否被选中
<input type="checkbox" name="your-group" value="unit-in-group" ng-change="toggleModal();"/>
Code for modal remains the same as the other answer suggested模态代码与建议的其他答案相同
<modal title="some title" ng-show="showModal">
I had a similar problem.我有一个类似的问题。
To detect a click use Angular syntax: (click)="toggleModal();"要检测点击,请使用 Angular 语法: (click)="toggleModal();"
<input type="checkbox" name="your-group" value="unit-in-group" (click)="toggleModal();"/>
I hope this helps.我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.