i am new to AngularJS, i try and do the code below
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function(){
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last){
if ( $last ) {
$scope.chargableDescription.push([""]);
}
}
});
Basically, what i am trying to achieve here is to insert the whole group of input when user input something on the last chargableDescription field.
<div class="chargable-group" ng-repeat="item in chargableDescription" >
<div class="col-md-3">
<label class="form-control-label" for="l2" id="chargable-label">Chargable Item</label>
</div>
<div class="col-md-9" id="chargable-header">
<textarea name="chargable[]" class="form-control dynamic chargable" placeholder="Chargable Description" ng-model="chargableDescription[$index]" ng-keypress="chargableInput($last)"> </textarea>
<br>
<input type="number" class="form-control" step="0.01" name="chargable-price-1" placeholder="Chargable Price" ng-model="chargablePrice[$index]">
<br>
<input type="number" class="form-control" name="chargable-quantity-1" placeholder="Chargable Quantity" ng-model="chargableQuantity[$index]">
<br>
<input type="number" class="form-control" step="0.01" name="chargable-total-1" placeholder="Chargable Total" readonly ng-model="chargableTotal[$index]" >
</div>
</div>
It does the trick, however, i wonder why when i do any input on the textarea, the cursor will be gone once i input a character.
How to remove this behaviour and what would be the factor that causing this behavior?
UPDATE :
SOLVED
I added ng-model-options = { updateOn : 'blur' } and it seems like it solves the issue
It works for me https://plnkr.co/IV9t4fhln5v3l81NHaPC
What's your Angular version?
(function() {
'use strict';
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function() {
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last) {
if ($last) {
$scope.chargableDescription.push([""]);
}
}
$scope.init();
});
})();
Related
<input type="number" maxlength="1" max="5" min="0" placeholder="0" ng-model="rate">
<div ng-init="stars=Func(2)">
Rating: <span ng-repeat="x in stars track by $index">*</span>
</div>
In the above code I want to pass ng-model="rate", rate to the function Func.
ex: Func(rate); here rate should pass from ng-model.
JS Code:
var val='';
$scope.Func = function fun(n){
if(n == 0){
val = val + '';
} else {
val = val+'a';
return fun(n-1);
} return val;
};
You would need to rewrite your Func, such that it returns an array that contains the number of elements of your rate, so that your ng-repeat can use it for the displaying of stars.
It is as easy as
$scope.Func = function(n) {
return new Array(n);
}
Now, use your ng-init to initialize your rate to two:
<input type="number" maxlength="1" max="5" min="0" placeholder="0" ng-model="rate" ng-init="rate=2" >
Plnkr here
Edit: If your requirement is not to use Array aka collection, then ng-repeat is out of option. Fear not, we can return a string of stars instead.
Change your Func to this:
$scope.getStars = function(n) {
var stars = "";
for (var i = 0; i < n; i++) {
stars += "*";
}
return stars;
}
And your rating will now just display the string:
<div >
Rating: {{getStars(rate)}}
</div>
New Plnkr here
Since you can't use arrays and your rate limite is considerably low, you don't need to make a function and you can use ngSwitch to show/hide the appropriate rate, as follows:
(function() {
'use strict';
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.rate = 2;
})
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<input type="number" maxlength="1" max="5" min="0" placeholder="0" ng-model="rate">
<div ng-switch="rate">
Rating:
<span ng-switch-when="1">*</span>
<span ng-switch-when="2">**</span>
<span ng-switch-when="3">***</span>
<span ng-switch-when="4">****</span>
<span ng-switch-when="5">*****</span>
</div>
</body>
</html>
I have an input text field as :
<input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>
My controller has the ng-blur function as follows:
$scope.checkIfValid = function(){
console.log("Value is = " + $scope.inputNumber);
}
I have defined - $scope.inputNumber = '';
My console.log shows an empty value even though I input a value in the text field and hit 'Tab' or move on to the next field to invoke the ng-blur function.
What am I doing wrong here?
`
Check this
var app = angular.module("myapp", []);
app.controller("myCtrl", ['$scope', function($scope) {
$scope.inputNumber="new";
$scope.checkIfValid = function(){
console.log("Value is = " + $scope.inputNumber);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="myCtrl">
<input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>
<h1>{{inputNumber}}</h1>
</div>
</div>
I'm wanting to set a combined maximum length of 64 for two input fields in angular, so if say that for the first field the user enters 40 characters, in the second field the maxlength becomes 24.
So far I have tried to write is like so...
js
function newCat() {
var cat = {
id: $scope.id,
name: $scope.name
};
$scope.idMax = 64 - ($scope.name)
$scope.nameMax = 64 - ($scope.id)
[irrelevant code]
return cat
};
html
<div class="form-group">
<h3>id</h3>
<input ng-maxlength="idMax" type="text" class="form-control" ng-model="id">
</div>
<div class="form-group">
<h3>Name</h3>
<input ng-maxlength="nameMax" type="text" class="form-control" ng-model="name">
</div>
This hasn't worked though.
Can anyone suggest how it would be possible to fix what i've done, or what would be a better way to go about fixing the problem?
Made some piece of code that may help you.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name=''; $scope.id='';
var max = 10;
$scope.update = function() {
$scope.remaining = max - ($scope.name.length + $scope.id.length);
$scope.idMax = max - ($scope.name.length);
$scope.nameMax = max - ($scope.id.length);
}
$scope.update();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<h3>id</h3>
<input maxlength="{{idMax}}" type="text" ng-model="id" ng-change="update()"> Length: {{id.length}}
<h3>Name</h3>
<input maxlength="{{nameMax}}" type="text" ng-model="name" ng-change="update()"> Length: {{name.length}}
<p>Remaining: {{remaining}}</p>
</div>
Run it and see if its what you were trying to achieve.
Fiddle
Please help, I have the following code
<div>
<input type="checkbox" id="chk1" ng-model="Status" />
<span ng-bind="Title"></span>
</div>
<div id="div1" ng-show="Status">
<span ng-bind="SpanTitle" ></span>
<input type="text" id="txtLastName"
ng-model="LastName"
ng-click="LastNameClick()"
ng-blur="LastNameOut()"
name="txtLastName" />
</div>
and when checkbox is being checked the div1 is shown but the input text cannot be clicked or written.
Any idea please?
Edit: Added controller from user's comment
function DController($scope) {
var defaultInputText = "hello";
$scope.Title = "check";
$scope.SpanTitle = "Span";
$scope.Status = false;
$scope.LastName = defaultInputText;
$scope.LastNameClick = function () {
if ($scope.LastName ==defaultInputText) {
$scope.LastName = "";
}
}
$scope.LastNameOut = function () {
if ($scope.LastName.length == 0) {
$scope.LastName = defaultInputText;
}
}
}
From code, that you have provided, I can suggest, that problem can be in css. May be some elements overlap the input.
I have a checkbox as follows, and I want to show/hide taxid input or chkno input when it is checked or not.
<input type="checkbox" id="chks" ng-model='chks' chk-no>
Inorder to do this I have written a directive as follows, but it isn't working. what exactly is the issue in my directive?
app.directive('chkNo', function($compile,$log)
{
var template_taxid = "<label id='taxidlbl'>Tax ID Number</label><br/><input type=text' id='taxid' name='taxid' placeholder='Tax ID Number' ng-model='taxid' required>";
var template_chkno = "<label id='chklbl'>Check Number</label><br/><input type='text' id='chn' placeholder='Checking Number' ng-model='chn' required>";
var getTemplate = function(chks)
{
var template = '';
if(chks){
template = template_taxid;
}
else
{
template = template_chkno;
}
}
var linker = function(scope,element, attrs)
{
element.html(getTemplate(scope.chks)).show();
$compile(element.contents())(scope);
}
return{
restrict : 'EA',
replace : true,
link : linker
}
});
you can just use ng-show ng-hide
<input type="checkbox" ng-model='chks'>
<div ng-show"chks">
<label >Tax ID Number</label>
<br/>
<input type=text' name='taxid' placeholder='Tax ID Number' ng-model='taxid' required>"
</div>
<div ng-hide"chks">
<label>Check Number</label>
<br/>
<input type='text' placeholder='Checking Number' ng-model='chn' required>
</div>