I am trying to detect the minimum and maximum values of number type input field, so if the user increased the value, an ajax request get send, and so on for the max value.
Here is my code:
<input type="number" name="amount" id="amount" min="minNumber"
max="maxNumber" value="{{value['qty']}}"
data-product="{{value['id']}}"
ng-blur="isValid(true)"
ng-change="isValid(false)"
ng-model="level.num">
$scope.minNumber = 1,
$scope.maxNumber = 99,
$scope.addedToCart = false
$scope.isValid = function () {
if( ($scope.level.num < $scope.maxNumber) || ($scope.level.num > $scope.minNumber && blurMode)) {
$scope.tooMany = true;
$scope.level.num = $scope.minNumber;
}
};
You should not pass any parameter to your function from template, and use only ng-blur in your case no need of ng-change unless you want to check for each text change
ng-blur="isValid()"
Related
First of all, sorry if the original question isn't clear enough,
I was struggling to define the exact problem I'm having.
I am making a Chrome extension which features a list of blank input boxes. I would like to save the value assigned in those input boxes using the chrome.storage.set method, and retrieve said values into their original input boxes when the popup is reopened.
So far, I have managed to store locally the values of the boxes using a loop, assigning each value a key depending of its order of iteration.
HTML
<input type="text" class="random" value="">
<input type="text" class="random" value="">
<input type="text" class="random" value="">
<button id="4">save</button>
JS
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("4").addEventListener("click", save);
});
function save() {
var id = document.querySelectorAll("input[type='text']");
for (i = 0; i < id.length; i++) {
var inputValue= id[i].value;
if (id.length > 0) {
var key = "key"+i;
chrome.storage.local.set({[key]: inputValue});
alert(key)}
}
}
The problem comes when I try to retrieve each value and return it to its original input field. My solution was to create another loop which iterates through the input fields while retrieving the corresponding keys, but can't seem to make it work.
window.onload = () => {
const id = document.querySelectorAll("input[type='text']");
for (i = 0; i < id.length; i++) {
if (id.length > 0) {
var key = "key"+i;
chrome.storage.local.get([key], (data) => {
if (data.key) {
id[i].value = data.key;
}
});
}
}}
How should I define the variables properly? Is there any other work around to achieve the same result?
I have this function to search the database
app.limit = 5; // Set a default limit to ng-repeat
app.searchLimit = 0; // Set the default search page results limit to zero
app.search = function(searchKeyword, number) {
// Check if a search keyword was provided
if (searchKeyword) {
// Check if the search keyword actually exists
if (searchKeyword.length > 0) {
app.limit = 0; // Reset the limit number while processing
$scope.searchFilter = searchKeyword; // Set the search filter to the word provided by the user
app.limit = number; // Set the number displayed to the number entered by the user
} else {
$scope.searchFilter = undefined; // Remove any keywords from filter
app.limit = 0; // Reset search limit
}
} else {
$scope.searchFilter = undefined; // Reset search limit
app.limit = 0; // Set search limit to zero
}
};
And an input to use the search function. Every time the user press a key, the table filters
<input type="text" class="form-control" name="search"
placeholder="search for..."
ng-model="searchKeyword"
ng-keyup="management.search(searchKeyword, number);">
Problem is when I backspace all strings and there is no input, the tables shows no data, is there any way to detect if the input is = 0 so I can use my function management.showAll(); function
// Function: Show all results on page
app.showAll = function() {
app.limit = undefined; // Clear ng-repeat limit
app.showMoreError = false; // Clear error message
};
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="value='0'">
<input type="text" ng-model="value" />value={{value}}<br>
<div ng-show="value=='0'">
Input is "0"
</div>
</body>
I took me a while to figure this one out, but can someone post a cleaner method for limiting the number of digits in an input type='number'. One of the issues is that errors are thrown if $scope.variable = null....meaning nothing in the input field.
<input type="number" model='modalName' ng-change="monitorLength('modalName',16)">
JS:
$scope.monitorLength = function (model,maxLength) {
if ($scope[model] != null) { // prevent error on empty input field
var len = $scope[model].toString() ; // convert to a string
if (len.length > maxLength) { //evaluate string length
$scope[model] = parseInt(len.substring(0, maxLength));
// convert back to number or warning is thrown on input value not being a number
}
}
}
I then needed to expand up on this to account for number only, preventing any non-digit characters include '.' and ',' symbols:
var reg = new RegExp(/^\d+$/) ;
$scope.monitorLength = function (modal,maxLength) {
if ($scope[modal] != null) {
var len = $scope[modal].toString() ;
if (len.length > maxLength) {
$scope[modal] = parseInt(len.substring(0, maxLength));
} else if (!reg.test(len)) {
$scope[modal] = parseInt(len.substring(0, len.length-2));
}
}
}
Is there way to extract the ng-modal that was responsible for calling the ng-change? so the call would only have to be: ng-change="monitorLength(10)". And then in the function somehow dynamically retrieve the calling ng-modal?
<input type="number" max="99" onkeypress="if (this.value.length >= 2) return false;"/>
OR
<!--maxlength="10"-->
<input type="number" onKeyPress="if(this.value.length==10) return false;" />
this is a cleaner method for limiting the number, using ngMaxlength for that:
<input type="number" model='modalName' ng-maxlength="16">
You can find more attributes and info here
Is there way to extract the ng-modal that was responsible for calling the ng-change?
Yes. You can define a directive and require the ngModelController.
.directive('maxNum', function(){
return {
require: '^ngModel',
link: function($scope, elem, attrs){
// here you can add formatters/parsers to the ngModel
// to affect the change on the ngModel.$viewValue.
}
}
})
As #rolinger stated on the other answer, using the built in directives will not prevent the use from entering non-valid characters, they simply mark the model as being invalid.
When an user entering a value, system should check whether this value is within the range of Minimum and Maximum defined for this field. also, need check for number of decimal points allowed.
<input ng-model='data.value1' >
<input ng-model='data.value2' >
<input ng-model='data.value3' >
<input ng-model='data.value4' >
you can add type="number". and for angularJS
<input type="number"
ng-model=""
[name=""]
[min=""]
[max=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[pattern=""]
[ng-pattern=""]
[ng-change=""]>
Follow the link for more clarification
AngularJs Documentation
Extending My comment:
var range = 'your range';
var checkRange = function () {
var value = data.value;
if(value <=range) {
//your code;
} else {
//your code;
}
}
Update:
$scope.data.value = 500;
$scope.$watch('data.value', function (oldVal,newVal) {
if(newVal > 1000 ) {
$scope.data.value = 500;
}
})
As demonstrative in the following code sample, the input named amountOrPercet can be interpreted as an amount or as a percentage value, depending on the state of the mode radio button.
<input type="radio" name="mode" value="amt" ng-model="mode"/> Amount
<input type="radio" name="mode" value="pct"ng-model="mode"/> Percent
<input type="text" name="amountOrPercent" ng-model="amountOrPercent" check-percent/>
I have put together an attribute directive to invalidate amountOrPercent for values greater than 100, in case it must be interpreted as a percentage:
myApp.directive('checkPct', function () {
return {
require: 'ngModel',
link: function (scope, elem, attr, ngModel) {
ngModel.$parsers.unshift(function (value) {
var valid = scope.mode != 'pct' || value <= 100;
ngModel.$setValidity('checkPct', valid);
return valid ? value : undefined;
});
ngModel.$formatters.unshift(function (value) {
ngModel.$setValidity('checkPct', scope.mode != 'pct' || value <= 100);
return value;
});
}
};
});
When the value of mode it kept unchanged, The validation works as expected. However when the value of mode is changed, the value of amountOrPercent is not re-validated, unless user changes the value of amountOrPercentage.
I know that I can use a watch to do some action based on changes in mode, but my question is how I can trigger the validation on amountOrPercent, when mode is changed. - Thank you
You can add watcher for mode and revalidate value when it changes:
scope.$watch('mode', function(){
var valid = scope.mode != 'pct' || ngModel.$modelValue <= 100;
ngModel.$setValidity('checkPct', valid);
}