I am new to Angular, please help me. I have two input fields, one with area code and other with the number.
// First input field for area code
<input area-input type="tel" required="true" name="area"
ng-model="employee.home.area"></input>
// Second input field for number
<input phone-input type="tel" required="true"
name="number" ng-model="employee.home.number"></input>
I want to combine them into one like area code + number.
Thanks in advance. Any suggestions or help would be appreciated.
You can write custom directive, and use parsers and formatters from ngModelControllers
So you can get something like this:
angular.module('app', []).
controller('ctrl', function($scope,$timeout) {
$scope.employee = {home : {area:'area', number:'number'}};
})
.directive('phone', function() {
function formatPhone(value) {
console.log('format',value);
if (!value) return;
if (!value.number) return value.area;
value.area = value.area||'';
return value.area + "-" + value.number;
}
return {
require: 'ngModel',
scope:{
ngModel:'='
},
link: function(scope, element, attrs, ngModel) {
scope.$watch(function(){return scope.ngModel;},function(n){
if(!n) scope.ngModel={area:"",number:""}
console.log('watch',n);
ngModel.$viewValue= formatPhone(n);
ngModel.$render();
},true);
ngModel.$formatters.push(formatPhone);
ngModel.$parsers.push(function(value) {
console.log(value, value.split('-'));
var parts = value.split('-');
return {
area: parts[0],
number: parts[1]||''
};
});
}
};
})
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<h1>Hello Plunker!</h1>
// First input field for area code<br/>
<input area-input="" type="tel" required="true" name="area" ng-model="employee.home.area" />
<br/>// Second input field for number<br/>
<input phone-input="" type="tel" required="true" name="number" ng-model="employee.home.number" />
<br/><br/>
//custom field. format: area-number<br/>
<input data-phone type="tel" required="true" ng-model="employee.home" />
{{employee}}
</div>
You can use {{employee.home.area}}+{{employee.home.number}} in your html on
use `employee.home.area+employee.home.number` in your `controller`
Hope this helps
Related
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();
});
})();
<div ng-app ng-controller="MyCtrl">
<select ng-model="referral.organization" ng-options="b for b in organizations"></select>
</div>
<script type='text/javascript'>
function MyCtrl($scope) {
$scope.organizations = ['Moo Milk','Silver Dairy'];
$scope.referral = {
organization: $scope.organizations[0]
};
}
</script>
<input name="job_description" onkeypress="return event.keyCode != 13;" ng-model="req_data.job_description" value="{{referral}}" placeholder="Quantity" type="text" />
This is my code I just want to pass option value into input ng-model.
If I'm understanding correctly you want what's selected in the dropdown list above to be populated in the input field below?
<div ng-app ng-controller="MyCtrl">
<select ng-model="referral.organization" ng-options="b for b in organizations"></select>
<input name="job_description" onkeypress="return event.keyCode != 13;" ng-model="req_data.job_description" ng-value="referral.organization[0]" placeholder="Quantity" type="text" />
</div>
<script type='text/javascript'>
function MyCtrl($scope) {
$scope.organizations = ['Moo Milk','Silver Dairy'];
$scope.referral = {
organization: $scope.organizations[0]
};
}
</script>
Try this, be sure to put both select and input into the same controller as I have above.
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
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>