How do I restrict angular-xeditable to only positive numbers? - angularjs

I have the following code. Is there an attribute to restrict to just positive numbers?
<td><span e-step="0.001" editable-number="myNumber" onaftersave="updateValue()">{{ myNumber }} </span></td>

Try e-min="0" to set the minimum value
and e-max="100" to set a maximum.

Related

Angularjs SidebySide Sum

I'm trying to produce a table with the sum of the values at the bottom.
Here HTML:
<table>
<tr ng-repeat="a in all |filter:'Gönderildi'" ng-init="$parent.yekun=yekun+a.total">
<td>{{a.total}}</td>
</tr>
<td>{{yekun}}</td>
</table>
Output:
10
10
23
101023
Instead of adding the numbers it is showing them side-by-side. I tried to sum. By the way column is in int form.
Instead of 2+4=4 it shows "24".
The type of a.total or yekun is string.
Check both of them are integers.
If any one of them is string, it will concatenate them.

Input number with 2 decimal places and max length of 12

I have an input of type number, the value in this input will be saved in a column of type number(12,2), so I want to set the max length to 12 (12 digits in total,
2 of which are after the decimal point).
I tried as following :
<input type="number" md-maxlength="12" ng-pattern="/^[0-9]{0,10}([,.][0-9]{0,2})?$/" step="0.01" ..>
Whenver I type something it's invalid, this only occurs when I add the md-maxlength="12" which I use to display the max length under the input field.
As you can see in the picture the input is invalid.
How can I solve this ?
Edit:
ng-maxlength instead of md-maxlength resolves this issue but the x/12 label under the input which indicates the max length is not displayed anymore.
Edit 2:
The regex now indicates that only 10 number are allowed before decimal point (comma or dot) and 2 are optional after, you can see that the regex is working just fine here : https://regex101.com/r/fdDLFP/3, the problem is when I add the md-maxlength.

Angular.js square root for this calculator

I have searched far and wide looking for a simplified square root short code version and found plenty of versions in JavaScript, Java, jQuery ... but nothing in Angular.js.
Below is my code:
<body align"center"><form><h1 align="center">Quick 2 number Angular.js Calculator </h1></center>
<center><h6>- Teaching aide only -</h6></center>
<div ng-app="">
<input type="number" ng-model="numb1" placeholder="number1" size="5px"><br />
<input type="number" ng-model="numb2" placeholder="number2" size="5px"><br />
<b style="color:#0000FF"><button disabled>+</button>
<button disabled>-</button>
<button disabled>X</button>
<button disabled>/</button></b>
<button style="background-color:lime;color:green" disabled>ENT</button>
<button style="background-color:orange;color:red">CLR</button>
<center><h2>Answers Below</h2></center>
<p>My first expression: {{ numb1 }} ; {{ numb2 }}</p>
<p>Addition: {{ numb1 + numb2 }}</p>
<p>Subtraction: {{ numb1 - numb2 }}</p>
<p>Multiplication: {{ numb1 * numb2 }}</p>
<p>Division: {{ numb1 / numb2 }}</p>
<p>Square of {{ numb1 }}<small><sup>2</sup></small> is {{ numb1 * numb1 }}<br>Square of {{ numb2 }}<small><sup>2</sup></small> is {{ numb2 * numb2 }}</p>
<p>Cube of {{ numb1 }}<small><sup>3</sup></small> is {{ numb1 * numb1 * numb1 }}<br>Cube of {{ numb2 }}<small>
<sup>3</sup></small> is {{ numb2 * numb2 * numb2 }}</p>
</form>
The best way is to use filter for this:
angular.module('app', []).filter('sqrt', function() {
return function(number) {
return Math.sqrt(number);
};
});
<div ng-app="app">
<input type="number" ng-model="numb1" placeholder="number1" size="5px"><br />
<div>{{ numb1 | sqrt }}</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
In this case, javascript has what you want. You need to pass an argument to the Math.sqrt function for this. Here is an example from MDN. You could create a service or a directive to wrap around this function, but angularjs itself doesn't have this function.
function calcHypotenuse(a, b) {
return(Math.sqrt((a * a) + (b * b)));
}
console.log(calcHypotenuse(3, 4));
// expected output: 5
console.log(calcHypotenuse(5, 12));
// expected output: 13
console.log(calcHypotenuse(0, 0));
// expected output: 0
If you have to create a custom solution, I would recommend looking at the javascript code for the function itself to see how it's implemented. You can go to Firefox for example, to download their implementation.
I was able to find the algorithm, but not the code there after I downloaded it.
Square Root
A simple iterative algorithm is used to compute the greatest integer
less than or equal to the square root. Essentially, this is Newton's
linear approximation, computed by finding successive values of the
equation:
x[k]^2 - V x[k+1] = x[k] - ------------
2 x[k]
...where V is the value for which the square root is being sought. In
essence, what is happening here is that we guess a value for the
square root, then figure out how far off we were by squaring our guess
and subtracting the target. Using this value, we compute a linear
approximation for the error, and adjust the "guess". We keep doing
this until the precision gets low enough that the above equation
yields a quotient of zero. At this point, our last guess is one
greater than the square root we're seeking.
The initial guess is computed by dividing V by 4, which is a heuristic
I have found to be fairly good on average. This also has the
advantage of being very easy to compute efficiently, even for large
values.
So, the resulting algorithm works as follows:
x = V / 4 /* compute initial guess */
loop t = (x * x) - V /* Compute absolute error */ u = 2 * x /* Adjust by tangent slope */ t = t / u
/* Loop is done if error is zero */ if(t == 0)
break
/* Adjust guess by error term */ x = x - t
end
x = x - 1
The result of the computation is the value of x.
In Html :
call the cube and square function defined in angular controller
<input type="number" ng-model="numb1" placeholder="number1" ng-change="cube(numb1)" size="5px"><br />
<p>Square of {{ numb1 }}<small><sup>2</sup></small> is {{ cubeResult }}</p>
In Controller(*.js) :
define a function that returns square and cube of particular value
$scope.cubeResult =0;
$scope.square= function(value){
$scope.cubeResult = value * value;
};
$scope.cube = function(value){
$scope.cubeResult = value * value * value;
};

ng-pattern for only number with no decimal

Need ng-pattern for restricting entry of decimal in input type number.I have used
ng-pattern="/^[0-9]$/"
to get the result but its not showing error on 1.0,2.0,3.0 etc.
Example:
2.0 = fail
2 = pass
3.0=fail
3=pass
<div class="col-md-5 col-md-offset-7">
<input type="number" min="0" class="form-control" id="equalizingFactor"
name="equalizingFactor" ng-model="flatVariable.equalizingFactor"
itle="Equalizing Factor" ng-maxlength="3" ng-pattern="/^[0-9]$/"
message="The field should contain only numbers with no decimal places"
ng-readonly="flatVariable.pgmInd30"/>
</div>
Should only have numbers no decimals included.
These should work fine:
ng-pattern="/^[0-9]*$/" // 0 or more numbers
ng-pattern="/^[0-9]+$/" // 1 or more numbers
ng-pattern="/^\d*$/" // 0 or more numbers
ng-pattern="/^\d+$/" // 1 or more numbers

Display number always with 2 decimal places in <input>

I have a float value for the ng-model that I would like to always display with 2 decimal places in the <input>:
<input ng-model="myNumb" step ="0.01" type="number">
This works for most case when "myNumb" has decimal. But it will not force display of the 2 decimal places if "myNumb" has less than 2 decimal places (3.2), or an integer(30)
How can I force a display of 2 decimal place in the <input> field
AngularJS - Input number with 2 decimal places it could help...
Filtering:
Set the regular expression to validate the input using ng-pattern. Here I want to accept only numbers with a maximum of 2 decimal places and with a dot separator.
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal | number : 2" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />
Reading forward this was pointed on the next answer ng-model="myDecimal | number : 2".
If you are using Angular 2 (apparently it also works for Angular 4 too), you can use the following to round to two decimal places{{ exampleNumber | number : '1.2-2' }}, as in:
<ion-input value="{{ exampleNumber | number : '1.2-2' }}"></ion-input>
BREAKDOWN
'1.2-2' means {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}:
A minimum of 1 digit will be shown before decimal point
It will show at least 2 digits after decimal point
But not more than 2 digits
Credit due here and here
{{value | number : fractionSize}}
like {{12.52311 | number : 2}}
so this will print 12.52
Simply use the number pipe like so :
{{ numberValue | number : '.2-2'}}
The pipe above works as follows :
Show at-least 1 integer digit before decimal point, set by default
Show not less 2 integer digits after the decimal point
Show not more than 2 integer digits after the decimal point
Did you try using the filter
<input ng-model='val | number: 2'>
https://docs.angularjs.org/api/ng/filter/number
Another shorthand to (#maudulus's answer) to remove {maxFractionDigits} since it's optional.
You can use {{numberExample | number : '1.2'}}
best way to Round off number to decimal places is that
a=parseFloat(Math.round(numbertobeRound*10^decimalplaces)/10^decimalplaces);
for Example ;
numbertobeRound=58.8965896589;
if you want 58.90
decimalplaces is 2
a=parseFloat(Math.round(58.8965896589*10^2)/10^2);
(Math.round(2.782061* 100 )/100).toFixed(2);
This will convert that into Two decimal places:
For Ex: 2.782061 ---> 2.78 two decimal Places
Use currency filter with empty symbol ($)
{{val | currency:''}}

Resources