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>
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 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()"
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.
i want to apply word count in angular js (eg in Text Box " I am Good " word count should be 3 ) and i also want to limit the word count
please help
thanks in advance
I make a Working Plunker which counts words splitted by blank space.
HTML:
<body ng-controller="myCtrl">
Write in here!
<input type="text" ng-model="myModel"/>
<button ng-click="countWords(myModel)">Click Me</button>
<h1 ng-show="wordCount">You have {{wordCount}} words!</h1>
</body>
JS:
var myApp = angular.module("myApp",[]);
myApp.controller("myCtrl", function($scope){
$scope.split = [];
$scope.wordCount = 0;
$scope.countWords = function(text){
/*Split by Space*/
$scope.split = text.split(/(\s+)/);
/*Remove all the blank spaces*/
for(var i=0; i<=$scope.split.length; i++){
if($scope.split[i] === " "){
$scope.split.splice(i, 1);
}
}
/*Count Words*/
$scope.wordCount = $scope.split.length;
}
});
You can use this count to limit whatever you want. For instance, lets suppose you want to show "Hello There" only if ng-model has more than 3 words:
<div ng-show="wordCount>3">Hello There</div>
If you need to watch for how many words are contained in an input box, you simply attach a $watch task or use ng-change on that field, everytime it changes, you check how many words are in there, then you can deny more words to get written.
I hope I've been helpful.
enter code here$scope.countOf = function(text,count) {
var s = text ? text.split(/\s+/) : 0; // it splits the text on space/tab/enter
console.log(s.length);
$scope.wc=s.length;
if(s.length === count + 1){
// alert('limit exceded');
// text.substr(0,text.length);
}
return s ? s.length : '';
enter code here
};
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;
}
})