I have an x-editable form with several fields in it. I've only show the checkbox field here for brevity. There is an edit button that opens all of the elements for editing and when I click submit all of the elements are saved. While in edit mode I want to be able to call a function when the checkbox is clicked before submitting the form. It will be for validation to make sure the user really wants to uncheck the box. I want to prevent the default behavior of the checkbox and display a dialog for confirmation. This is simple with a regular checkbox but I can figure out how to do it with x-editable . ng-click doesnt seem to work. As you can see from the example e-onClick works but only with built in functions like alert() and console.log().
<form editable-form name="tableform" onaftersave="save()"oncancel="cancel()">
<table>
<tr>
<th>Active:</th>
<td>
<span editable-checkbox="user.active" e-form="tableform" e-onClick="console.log('test')"> {{user.active)}}
</span>
</td>
</tr>
</table>
</form>
I want to do some thing like this:
<span editable-checkbox="user.active" e-form="tableform" e-onClick="confirm($event)"> {{user.active)}}
</span>
and in my controller do something like this:
$scope.confirm = function($event){
$event.preventDefault();
// show confirmation code
};
Can you try
<span editable-checkbox="user.active" e-form="tableform" e-ng-click="confirm()"> {{user.active)}}</span>
And
$scope.confirm = function(){
console.log("test")
};
This will work
Related
Im using ionic framework and Im trying to create a phone list which can add and delete the user entered phone no.Here the user entered numbers are listed with check box on clicking the add button.When the user selects the check-box and clicks the delete button, he must be able to delete the selected check box phone number.Here the problem is while using the delete button, it doesn't delete the selected check box instead it is deleting the first value entered in the list. So please help me to delete only user selected check-box items.
html code:
<div>
<ion-checkbox ng-model="phoneno" ng-repeat="y in phonelist">
<span data-ng-bind="y"> {{y}}</span> </ion-checkbox>
<button ng-click="remove($index)" value="Delete">Delete</button><br>
</div>
<br>
<br>
<div>
<!label class="item item-input item-floating-label">
<input ng-maxlength="10" ng-model="phone"> <br>
<button ng-click="add()" value="Add">Add</button><br>
<!/label>
</div>
</ion-content >
</ion-view>
js code:
.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.controller('addAdmin',['$scope',function($scope){
$scope.phonelist=[];
$scope.add=function(phone){
$scope.phonelist.push($scope.phone);
$scope.phone='';
}
$scope.remove=function(uuid){
var x=$scope.phonelist[uuid];
$scope.phonelist.splice(uuid,1);
}
}]);
Sorry for my english. I'm foreigner..
The problem is that your loop ends before the button, so when the button gets clicked the $index is always 0.
Because its not inside the element "ion-checkbox".
Here is my solution: put ng-click inside the checkbox and call to function with the $index.
And in the js, save the index on a scope var. So if the delete button gets clicked, delete the index that you saved on the previous function.
I hope that i helped.
It seems like you mean something else than your code says. You probably want to delete all phones that are checked, when clicking the button. Therefore you don't need the $index property, but just loop through the phones and delete the ones that are checked.
You will have to keep track of a 'checked' property of each phone, so you know which are checked. You can do this by using an object which holds the phone information, instead of just a string:
<div>
<!-- ng-model to a property of the phone that keeps track if the phone is checked -->
<ion-checkbox ng-model="y.checked"
ng-repeat="y in phonelist">
<span data-ng-bind="y.number">{{ y.number }}</span>
</ion-checkbox>
<button ng-click="removeSelected()" value="Delete">Delete</button><br>
</div>
<!-- ng-model to a property of the phone object -->
<input type="text" ng-model="phone.number" />
And in your controller:
$scope.add = function() {
$scope.phonelist.push($scope.phone);
}
$scope.removeSelected = function() {
var i = $scope.phonelist.length;
// reversed loop because you change the array
while (i--) {
var phone = $scope.phonelist[i];
// If phone is checked, remove from list
if(phone.checked) {
$scope.phonelist.splice(i, 1);
}
}
}
See this jsfiddle
Or see this jsfiddle where I included Ionic
It seems that you're mixing the add and remove functions, try to separate those as below.
.controller('addAdmin',['$scope',function($scope){
$scope.phonelist=[];
//Add function
$scope.add=function(phone){
$scope.phonelist.push(phone);
$scope.phone='';
}
//Remove function
$scope.remove = function(index){
$scope.phonelist.splice(index, 1);
};
}]);
add the following code in your controller
$scope.remove = function(index){
$scope.phonelist.splice(index, 1);
}
and that should work
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 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.
I have in AngularJS a list with multiple entries and for each entry a button. When clicking the button, the application will do some stuff and after that was successful, the button should be disabled.
The interesting part in my template look like this:
<li ng-repeat="item in items">
<span>{{item}}</span>
<button ng-click="doSomeStuff(item)">Request</button>
</li>
I already tried to use the ng-if directive, but then of course every button will disappear.
Previously, I thought about a solution in raw Javascript or jQuery, because it is very easy just to modify the button by its id. But is there a solution provided by AngularJS?
Use ng-disabled as follows:
<li ng-repeat="item in items">
<span>item</span>
<button ng-click="doSomeStuff(item)" ng-disabled="item.disabled">Request</button>
</li>
Controller:
$scope.doSomeStuff = function(item) {
//do operations and finally set disabled to true for that button
item.disabled = true;
}
I'm new to AngularJS, and while playing with it, i have encountered with the problem.... I have a table like this :
...
<tr ng-repeat="line in lines">
<remove-line>
<input id="line_id" type="hidden" value="{{line.id}}">
<td id="sn">{{$index+1}}</td>
<td>{{line.ref}}</td>
<td>{{line.label}}</td>
<td class="tva">{{line.tva}}</td>
<td class="qty">{{line.qty}}</td>
<td class="unity">{{line.unity}}</td>
<td class="prix">{{line.prix}}</td>
<td>{{line.prix*line.qty}}</td>
<td><button class="btn" id= "remove"><i class="icon-remove"></i> </button></td>
</remove-line>
</tr>
...
I want to have some behavior when clicking on the remove button, using custom directive. AngularJS code looks like :
angular.module('myApp', []).directive('removeLine',function(){
var remove = function(){
...
alert ("Oops removed!");
}
return {
restrict: 'E',
link : function(scope,element, attrs){
$("#remove").on('click', remove);
}
};
});
But this doesn't work.... Nothing happens when i click on the remove button in the table..... But all this work fine when the button is out of the tag. Why is it so and how make it work?
I have created jsfiddle to illustrate my situation http://jsfiddle.net/alexrussinov/cs8RP/71/. What is strange that when I test this code on my local machine buttons in the table don't work but two separate under it, work fine. On jsfiddle, neither in the table nor below it, it doesn't work.
You can't have multiple elements on a page with the same ID, which is what you're doing with the button.
I think the simplest solution would be to stick the remove() call directly in the button tag with ng-click, passing in the line that you wish to remove. This of course assumes that your remove() method is part of $scope.
<button class="btn" ng-click="remove(line)"><i class="icon-remove"></i></button>