I have a HTML table in which one of the column is editable
<td ng-model="my.grade">
<div contenteditable>
{{list.grade}}
</div>
</td>
I have an angular function getInformation which does some calculation and connects to back end and then
makes the table. My goal is that when the user changes the value of above column and hits the enter I want to update the table and basically re-run the function getInformation.
I read that I should ng-model and ng-change but how should I update the table value on the enter?
You can do it like this:
<td ng-model="row.grade"
contenteditable ng-keypress='keyPressed($event)'></td>
So, ng-model and contenteditable must be on the same element.
Also, if you specify ng-model on a element, all of its content will be replaced by the value from a model. So it should be empty.
And
$scope.keyPressed = function (e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { // 'Enter' keycode
$scope.getInformation(); // your function here or some other code
e.preventDefault();
}
}
Here is working Plunkr:
http://plnkr.co/edit/sHHlqF
Why do you use contenteditable? Maybe you could use just <input ng-model...>?
Related
I'm trying to create a form in which the submit button is disabled until the text matches my conditions. And I'd like to constantly (each time a character is typed) check the text, instead of having to create a button that will activate another one.
Thanks !
You can use jquery and keyup to detect every time that the user type something here is an example:
http://jsfiddle.net/82sTJ/253/
<input type="text" id="text">
<button type="submit" disabled id="submitButton">
Submit
</button>
var condition = "good";
$('#text').keyup(function(event) {
if($('#text').val() == condition) {
$("#submitButton").prop('disabled', false);
}else{
$("#submitButton").prop('disabled', true);
}
});
Here is the alternative way using input suggested by Rob:
var condition = "good";
$('#text').on("input", function(event) {
if($('#text').val() == condition) {
$("#submitButton").prop('disabled', false);
}else{
$("#submitButton").prop('disabled', true);
}
});
Also you can use something like vue.js or angular to check the value in real time.
*Edited
I use *ngFor to populate my table.
<tr *ngFor= "stu in students">
<td>{{stu.name}}</td>
<td><input type="checkbox" ngModel="isChecked"
(ngModelChange)="addID(stu.id)</td>
</tr>
Then I have a button outside the table.
<button (click)="selectAllID()">select all</button>
Then I have my component as:
studentID=[];
isChecked=false;
addID(id:number){
this.student.push (id);
//I do other thing with id
}
selectAllID (){
If (this.isChecked)
this isChecked = false;
else this isChecked = true
}
The problem is:
if I check individual checkbox, the addID() function is executed. But if I click on the select all button, the checkboxes get selected. But the addID() function is not called.
How can I trigger the ngModelChange function when I use the select all button so I get all selected id's
You have only one way binding of the input control with ngModelChange directive. But to update the view you should bind the control to ngModel.
<input type="checkbox" [ngModel]="isChecked"
(ngModelChange)="addID(stu.id)">
Thank you everyone. i finally resolved the issue. This is what i did:
I used the selectAll() function to automatically load all id's (this id i get from the source loading my tables) to an array. and
i set the value of isChecked to true or false.
This question already has answers here:
Prevent users from submitting a form by hitting Enter
(36 answers)
Closed 6 years ago.
I have an html form with some input fields in it, one of the input field is search field, when I click the search button next to this search input field, search results will be returned from server using ajax, what I want is to prevent form submission when user focuses on this specific search input field and hit enter. By the way, I'm using AngularJS, so solution might be a bit different from JQuery or pure javascript way I think.. Do-able? Any advice would be appreciated!
Use a function like:
function doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( keyCode == 13 ) {
if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
<form name="input" action="http://www.google.com" method="get">
<input type="text" onkeydown="doNothing()">
<br><br>
<input type="submit" value="Submit">
</form>
JSFIDDLE HERE
In the button click handler do a e.preventDefault()
function clickHandler(e){
e.preventDefault();
}
You can also use a button instead of a submit button.
When you submit form using enter key on particular text fields or submit button(focus).
To prevent form submit twice, we can use both approach
1.
define var isEnterHitOnce=true globally which loaded at the time of form load
on keyPress Event or on submitForm()
if(event.keycode==13 && isEnterHitOnce){
isEnterHitOnce=false;
//Process your code. Sent request to server like submitForm();
}
isEnterHitOnce=false;
2.
disable the field object from where you received the action like
beginning of method in formSubmit()
document.getElementById(objName).disabled=true; // objName would be your fields name like submitButton or userName
//At the end of method or execution completed enable the field
document.getElementById(objName).disabled=false;
I'm trying to get the value of a mobile number textbox to validate its input value using angular.js. I'm a newbie in using angular.js and not so sure how to implement those events and put some javascript to validate or manipulate the form inputs on my html code.
This is my HTML:
<div>
<label for="mobile_number">Mobile Number</label>
<input type="text" id="mobile_number" placeholder="+639178983214" required
ngcontroller="RegisterDataController" ng-keydown="keydown">
</div>
And my controller:
function RegisterDataController($scope, $element) {
console.log('register data controller');
console.log($element);
$scope.keydown = function(keyEvent) {
console.log('keydown -'+keyEvent);
};
}
I'm not sure how to use the keydown event in angular.js, I also searched how to properly use it. And can i validate my inputs on the directives? Or should I use a controller like what I've done to use the events like keydown or keypress?
Update:
ngKeypress, ngKeydown and ngKeyup are now part of AngularJS.
<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">
<!-- or call a controller/directive method and pass $event as parameter.
With access to $event you can now do stuff like
finding which key was pressed -->
<input ng-keypress="changed($event)">
Read more here:
https://docs.angularjs.org/api/ng/directive/ngKeypress
https://docs.angularjs.org/api/ng/directive/ngKeydown
https://docs.angularjs.org/api/ng/directive/ngKeyup
Earlier solutions:
Solution 1: Use ng-change with ng-model
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController" ng-change="keydown()">
JS:
function RegisterDataController($scope) {
$scope.keydown = function() {
/* validate $scope.mobileNumber here*/
};
}
Solution 2. Use $watch
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController">
JS:
$scope.$watch("mobileNumber", function(newValue, oldValue) {
/* change noticed */
});
You were on the right track with your "ng-keydown" attribute on the input, but you missed a simple step. Just because you put the ng-keydown attribute there, doesn't mean angular knows what to do with it. That's where "directives" come into play. You used the attribute correctly, but you now need to write a directive that will tell angular what to do when it sees that attribute on an html element.
The following is an example of how you would do that. We'll rename the directive from ng-keydown to on-keydown (to avoid breaking the "best practice" found here):
var mod = angular.module('mydirectives');
mod.directive('onKeydown', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
// this next line will convert the string
// function name into an actual function
var functionToCall = scope.$eval(attrs.ngKeydown);
elem.on('keydown', function(e){
// on the keydown event, call my function
// and pass it the keycode of the key
// that was pressed
// ex: if ENTER was pressed, e.which == 13
functionToCall(e.which);
});
}
};
});
The directive simple tells angular that when it sees an HTML attribute called "ng-keydown", it should listen to the element that has that attribute and call whatever function is passed to it. In the html you would have the following:
<input type="text" on-keydown="onKeydown">
And then in your controller (just like you already had), you would add a function to your controller's scope that is called "onKeydown", like so:
$scope.onKeydown = function(keycode){
// do something with the keycode
}
Hopefully that helps either you or someone else who wants to know
You can checkout Angular UI # http://angular-ui.github.io/ui-utils/ which provide details event handle callback function for detecting keydown,keyup,keypress
(also Enter key, backspace key, alter key ,control key)
<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>
JavaScript code using ng-controller:
$scope.checkkey = function (event) {
alert(event.keyCode); //this will show the ASCII value of the key pressed
}
In HTML:
<input type="text" ng-keypress="checkkey($event)" />
You can now place your checks and other conditions using the keyCode method.
I have more than one form on the same page:
I would like to know if there is any way I can submit the right form when the user press the "return keyboard key" ?
Thanks
How about this:
<form id="form1">
<input type="text" />
</form>
<form id="form2">
<input type="text" />
</form>
<script type="text/javascript">
for (var i = 0; i < document.forms.length; i++) {
document.forms[i].onkeypress = function(e) {
e = e || window.event;
if (e.keyCode == 13)
this.submit();
}
}
</script>
Basically loop through each form, wire the onkeypress event for each one that checks for enter (keycode == 13) and calls submit on that form.
I assume by right form you mean the form the user is working on !
Well it is not the cleanest of way but if you really want to work this way, You can designate form boundaries and you can set the focus to the appropriate submit button as soon as the user scroll pass from one form to other.
With neater version, you can drive the users to chose appropriate options and lead them to work on a single form (may be hide the irrelevant form once you get enough information about what user is going to work on)
Check which element has the focus. Check which form is his parent. Execute submit.
document.onkeypress = function() {
var element = activeElement.parentNode;
while(element.nodeType != /form/i) {
element = element.parentNode;
}
element.submit();
}