My code has following structure:
<div>
/ child tags and are loaded into a load-div which is in main.html on events such as clicknow in one such file say file3.html, I have a checkbox. onclick of that checkbox I want to open a modal window - a form that will be submitted. Now here is my code
file3.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
$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. and when I click it I get angular exception that showModal is not defined.
Where am I going wrong?
Just need to use Angular syntax: ng-click
for the click and ng-show
for the visibility.
<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.
Or you could use ng-model
(ng-model="showModal"
) and get rid of your toggle function entirely Example.
I had a similar problem.
To detect a click use Angular syntax: (click)="toggleModal();"
<input type="checkbox" name="your-group" value="unit-in-group" (click)="toggleModal();"/>
I hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With