I am trying to create an xeditable form as demonstrated here: https://vitalets.github.io/angular-xeditable/#editable-form.
I have followed the instructions exactly but my form is not working. I want to save a resource, but when I click the Edit button, which should display the form, it seems to skip the editing stage and immediately triggers the saveResource function - which should only happen when the form gets saved.
I've compared my code to the documentation again and again and can't work out what I am doing wrong.
HTML
<form editable-form name="editResourceForm" onaftersave="saveResource()">
<p>
<strong editable-text="resource.title" e-name="title">
{{resource.title}}
</strong>
</p>
<div class="col-xs-12 col-sm-4">
<button ng-click="editResourceForm.$show()" ng-show="!editResourceForm.$visible">Edit</button>
<!-- buttons to submit / cancel form -->
<span ng-show="editResourceForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="editResourceForm.$waiting">Save</button>
<button type="button" class="btn btn-default" ng-disabled="editResourceForm.$waiting" ng-click="editResourceForm.$cancel()">Cancel</button>
</span>
</div>
</form>
JS
app.controller('Ctrl', function($scope, $filter) {
$scope.resource = {
title: 'awesome resource'
};
$scope.saveResource = function() {
console.log("Save resource");
}
});
JSFIDDLE HERE
You can see that it is trying to save the form, because every time the Edit button is clicked, the console logs "Save resource". This should not happen when the edit button is clicked.
#ckosloski answered this on Github:
I think it's because your edit button does not specify a button type.
By default, the button type is submit. So you are clicking on the
button and it's submitting the form since it's a submit button. Try
adding type="button" to your edit button.
Adding this solved it, as you can see from the updated JSFiddle.
Related
New to Angularjs. In a form i have a button and clicking upon, it would call a function with formname in its input:
<button ng-show="!ask" id="id1" class="btn btn-primary save" ng-click="checkfunction(claim.ProviderJSON,claimform)" style="margin-right: 60px;">Add</button>
The checkfuntion is below:
$scope.checkfunction = function(obj,claimform) {
console.log(claimform);
console.log($scope.claimform.svcDateFrom.$pristine);
$scope.claimform.svcDateFrom.$pristine='true';
$scope.claimform.svcDateFrom.$setPristine();
$scope.claimform.svcDateFrom.$setPristine('true');
claimform.svcDateFrom.$pristine='true';
claimform.svcDateFrom.$setPristine();
claimform.svcDateFrom.$setPristine('true');
console.log(claimform);
console.log(claimform.svcDateFrom.$pristine);
console.log($scope.claimform.svcDateFrom.$pristine);}
Now when i am clicking the "Add" button, and check on console.log(claimform); (before updatinng pristine) the claim form has as $pristine:false
but console.log($scope.claimform.svcDateFrom.$pristine); is coming as true.
I am not able to update the pristine values. I need to keep it true and dirty as false after clicking on Add button. I tried different methods but all in vain.
Thanks in advance!!
I am using angular 1.3 with strap modal dialog and the form inside it.
There are 2 buttons: OK and Cancel.
Cancel works as expected - it closes the modal.
But on OK the dialog is not closed; however, the form is processed as expected.
The code below shows the model and the code which instantiates the modal dialog.
I am using button type=submit on OK to process the form.
The $modal.showTemplate has 2 parameters:
1) HTML (code below)
2) callback which shall know which button was used: OK or Cancel.
For some reason, this callback is invoked only on Cancel.
I tried to fix it by using ng-click="$close(true) on OK button
instead type=submit but it does not help.
Question: how to close the modal dialog on OK?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div ng-controller="externalController">
<form
role="form"
name="detailForm"
ng-submit="submit()"
>
<div ng-controller="internalController">
... some form fields are here ...
<button class="btn" ng-click="$close(false)">
Cancel
</button>
<button class="btn" type="submit">
OK
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- invoking the modal defined above: -->
$modal.showTemplate(htmlTemplate,
function(confirm) {
console.log("callback confirm="+confirm);
if (confirm === true) {
console.log(" this point never achieved ... and modal dialog is not closed");
} else {
console.log(" this works as expected and modal dialog is closed");
}
},
);
Get rid of the submit type on your 'OK' button. Attach the ng-click directive to this same 'OK' button. On click your button will submit the form via '[externalController].submit()'. If submit() returns a promise then wait for it, otherwise then call the modal controllers 'close()';
<button class="btn" ng-click="functionThatSubmitsAndCloses()">
OK
</button>
And in your 'internal controller' you'll have that function defined on your scope
$scope.functionThatSubmitsAndCloses = function () {
[scope of externalController].submit();
$close(true); // close being defined on the instance of your modal's controller and not this internal controller.
}
Is this an older version of angular strap? I do not see showTemplate defined in their API.
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
I've been trying to use angular-ladda and only seeing a blank button when it should show the spinner icon:
All css and modules are loaded properly.
Here's the code used in the HTML:
<button ladda="news.working" class="ladda-button btn btn-primary" data-style="zoom-in" ng-click="news.setup()">
Update Settings
</button>
Any thoughts?
As it turns out, the simple fix is to add data-spinner-size as an attribute to the HTML:
<button ladda="news.working" class="ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25" ng-click="news.setup()">
Update Settings
</button>
I am using the angular-bootstrap in AngularJS, because I want to use dialogs. In my HTML I have the following code:
<script type="text/ng-template" id="create.html">
<div class="modal-header">
<h3 class="modal-title">Welcome!</h3>
</div>
<div class="modal-body">
<p>Hi</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
The modal dialog shows up, but nothing happen when I click on the "OK" button.
There is also no error in the console. When I create a button and place it outside the script, then it works. But I need to use the button in the modal dialog.
I have created a factory for the modal dialog, because I want to use it in my controller. Here the function what works fine:
$scope.createGame = function(data){
// Open the modal dialog
ModalFactory.open();
}
Now the modal dialog shows up and the button "OK" appears. When I click on "OK" nothing happen. This is the function I have created for the "OK" button.
$scope.ok = function(data){
// Close the modal dialog
alert("Test");
}
But the triggering of ng-click in that script what you see above doesn't work...
Your function requires a parameter "data" but you are not passing it.
<button class="btn btn-primary" ng-click="ok()">OK</button>
Either Change your function signature like this,
$scope.ok = function(){
// Close the modal dialog
alert("Test");
}
Or Pass the data.
It's always use a different function name rather than just "ok"