I'm using xeditable angular directive.Could you tell me how to use 2 cancel buttons ? B'cos I need to implement 2 functionalities on it.I mean cancel + my work 1 and cancel + my work 2. Thanks in advance.
HTML
<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">
//UI code here
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">Cancel</button>
</form>
JS
// cancel all changes
$scope.cancel = function() {
};
JSFiddle
You can have 2 cancel buttons within the form and pass the form as attribute. Then in the corresponding cancel functions you can invoke form.$cancel and then do your logic. form.$cancel does the same work as invoking ng-click="tableform.$cancel()".
Play with it : Plunker
//html
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel1(tableform)" class="btn btn-default">cancel 1</button>
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel2(tableform)" class="btn btn-default">cancel 2</button>
//controller
$scope.cancel1 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic1
};
$scope.cancel2 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic2
};
Actually you should be able to take control of how the cancel button function. If you take carefully into the code you will see that, they just create some buttons and display or hide them base on the current form status(form.$visible)
Do something like this.
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel1</button>
</div>
Here is an example
Related
How to disable a button on click and replace that button with another button with different function using AngularJS?
The following is my button,
<button type="submit" class="btn btn-small btn-default"
ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">
<span class="glyphicon glyphicon-edit"></span> Edit Setting</button>
you can use a state setting, say $scope.showFirstButton=true to control when to show the submit button:
<button ng-show="showFirstButton" type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">Edit Setting</button>
and another button, showing them alternatively:
<button ng-show="!showFirstButton" type="submit" class="btn btn-small btn-default" ng-click="doSomethingElse()">Seccond Button</button>
In the controller method $scope.editSetting() you change the value of the state: $scope.showFirstButton = !$scope.showFirstButton'.
Edit: if you need to revert the state of the buttons, do the same thing in the second method:
$scope.doSomethingElse = function(){
//some cool things happen here, and:
$scope.showFirstButton = !$scope.showFirstButton
}
and this will get back the first button and hide the second.
First of all, I can imagine the subject of this question is not very clear, so sorry for that.
I am using a button with ng-click to display an input (ng-show) and two other buttons(send, cancel). For hiding the input again I use the "cancel" button. But I also would like to clear the value of the input. The problem is that I dont know how to invoke the clear function as well as the hiding the input again with the same button.
Here is my code:
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
show input.
</button>
<div class="form-group" ng-show="showme">
<input id="myInput2" class="typeahead" sf-typeahead type="text" datasets="userDataset" ng-model="searchUser" >
<button ng-click="showme=false" class="btn btn-xs">Cancel</button>
<button ng-click="send()" class="btn btn-success btn-xs btn-sent">Send</button>
</div>
$scope.showme = false;
Just update your code
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
with
<button class="btn-share" ng-click="searchUser='';showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
I have added searchUser='' in ng-click. So, when user click on it, it will first update the searchUser to empty string in scope and then update showMe in scope.
If you do not want information after cancel, you can do the same thing with ng-click of cancel button.
Here is a plunker for you - http://plnkr.co/edit/X9wbGYsBoIXxR7QmE1zP?p=preview
If you add this line to your clear() function:
$scope.showme = false;
it will invoke the function and set the showme variable to false, thus hiding the div!
So your clear function could look like this:
$scope.clear = function() {
$scope.searchUser = "";
$scope.showme = false;
}
The below code generates a json string on the click of some buttons.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
var output = $(".btn").click(function() {
$(this).toggleClass('active');
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
};
if (!output.Studios.length) {
output.Studios = $('#btnStudios button').map(function() {
return $(this).val();
}).get()
$('.list').html(JSON.stringify(output));
});
Basically what i am looking for is a timer which refreshes for 1 second everytime a button is clicked and then generates the json string based on the button selection.
I used the setInterval() function but that did not help.
How would i go about this?
Thanks in advance.
I didn't fully understand your question.
However, based on the code, I assume you want to show a JSON-string based on which buttons have the .active class?
Your code contained syntax errors.
I created a quick JSfiddle with what I think you wanted.
However, I have made no use of setTimeout since I couldn't come up with valid use case.
Feel free to provide us with more info and I'll improve my answer!
EDIT:
Okay, so you want to wait 1sec after the click.
I updated the JSfiddle.
EDIT²:
I'd also use clearTimeout so clicks that happened while you are already waiting 1 sec are ignored.
As seen in this JSfiddle.
I am new to angularJS and am working on a form which has 2 buttons on it (submit & close).
The 'Submit' button has a type="submit" and the 'Close' button has a type="button".
I have managed to disable the 'Submit' button when clicked but I also need the 'Close' button to be disabled.
This is the bit I am stuck on.
Also to point out the 'Submit' button on my form is 'Disabled' when the form opens until all the mandatory fields are populated.
All of this currently is done in the HTML.
HTML
<button ng-disabled="enterreminder.remtype.$invalid
|| enterreminder.remother.$invalid
|| enterreminder.remarea.$invalid
|| enterreminder.remdate.$invalid
|| enterreminder.remsubject.$invalid
|| enterreminder.remnotes.$invalid"
type="submit" class="btn btn-primary" ng-click="submit()" onclick="this.disabled=true;" title="Click to set the reminder.">
Submit
</button>
<button type="button" class="btn btn-warning" ng-click="cancel()" title="Click cancel the reminder.">Close</button>
So to sum up I want the 'Submit' and 'Close' buttons to be disabled when the 'Submit' button is clicked. I'm not bothered if the 'Close' button is clicked as the 'Submit' button is already disabled.
Will I need to add code to my controller? and if so can you please help me out with it as I cant seem to find a starting point from Google.
Thanks
In a nutshell, you need to have a ViewModel property that drives the desired behavior and assign it to each button's ng-disabled directive:
<button type="submit" ng-disabled="commandButtonsDisabled"
ng-click="submit(); commandButtonsDisabled = true">Submit</button>
<button type="button" ng-disabled="commandButtonsDisabled"
ng-click="cancel()">Close</button>
This just illustrates the point, but it's not a good design to have multiple actions assigned to ng-click. The code above also doesn't show how $scope.commandButtonsDisabled is initialized (although, being undefined it would result in falsy value) and reverted back, so it's better to put this functionality in a controller:
.controller("MyCtrl", function($scope, $http){
$scope.commandButtonsDisabled = false;
$scope.submit = function(){
$scope.commandButtonsDisabled = true;
$http.post(....)
.success(...)
.finally(function(){
$scope.commandButtonsDisabled = false;
}
}
}
<button type="submit" ng-disabled="commandButtonsDisabled" ng-click="submit()">Submit</button>
<button type="button" ng-disabled="commandButtonsDisabled" ng-click="cancel()">Close</button>
Off-topic:
It seems that you have a bunch of form elements that you are also testing for validity. Instead of testing each element individually, use the validity of the form:
<div ng-form="enterreminder">
<input ng-model="remtype" ...>
<input ng-model="remother" ...>
...
<button type="submit" ng-disabled="enterreminder.$invalid || commandButtonsDisabled"...>Submit</button>
</div>
here is an example...
Put this code in .js file
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.name = 'World';
$scope.disable_buttons = false;
$scope.submit = function () {
$scope.disable_buttons = true;
}
});
And in HTML
<button ng-disabled="disable_buttons"
type="submit" ng-click="submit()" title="Click to set the reminder.">
Submit
</button>
<button ng-disabled="disable_buttons" type="button" ng-click="cancel()" title="Click cancel the reminder.">Close</button>
Can't your submit and close buttons watch a single scope variable such as 'submit' below:
<button ng-disabled="submit" ng-click="submit=true">Submit</button>
<button ng-disabled="submit">close</button>
Is that possible when the user add a new row and by clicking on the cancel button(without put any data), the row will be deleted.
Otherwise how can I change the cancel button code, because this one use the default xeditable code of angularJS.(Or maybe how can I call the delete function if the row is empty?)
This is the EXAMPLE.
HTML for the cancel button:
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
You may call your own function. To achieve this you should change your html like this:
<button type="button" ng-disabled="rowform.$waiting"
ng-click="cancelAdvice(rowform, $index)"
class="btn btn-default">
cancel
</button>
As you can see there is a new function with the form and the current index as parameter. In your controller you have to define this function:
$scope.cancelAdvice = function(rowform, index){
console.log(rowform, index);
$scope.removeUser(index);
rowform.$cancel();
}
Now you can do your own stuff and call the form $cancel if you are done.
Alternatively if you look at xeditable.js you'll see that $cancel() internally calls $oncancel() which looks for oncancel attribute on the form and calls the function supplied in it. So instead of handling the form in the controller you could have:
<form editable-form name="rowform" onbeforesave="saveRole($data, $index)" oncancel="removeIfNewRow($index)" ng-show="rowform.$visible" class="form-inline" shown="inserted == role">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>