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>
Related
Having this js fiddle
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = $scope.value1;
$scope.value2 = "this is it: " + $scope.value1;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1"></input></br>
<input type="text" ng-model="name" ng-change="value1"></input>
</div>
</html>
I want to introduce a value in the first input and to get it into the next one as "this is it: firstvalue".
You can achieve that easily using ng-change and using ng-model properly
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = undefined;
$scope.value2 = undefined;
$scope.onValue1Change = function(){
$scope.value2 = "this is it: " + $scope.value1;
};
}
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1" ng-change="onValue1Change()"></input></br>
<input type="text" ng-model="value2"></input>
</div>
</html>
I want to change the form inputs dynamically , and i have tried doing it using ng-bind-html , but only label is getting displayed , text box doesn't appears on the DOM. Here what has to be written inside ctrl.content depends upon the values from the server.
Note
type value will be coming from server , and it can be dynamic
HTML
<div ng-bind-html="ctrl.content">
Controller
function myCtrl(type) {
var ctrl = this;
switch (type) {
case 1:
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
break;
case 2:
ctrl.content = " <div> Input : <input type=\"textarea\" > </div> ";
break;
default:
}
Dom Element :
<div class="padding ng-binding ng-scope" ng-bind-html="addMeassurments.content"> <div> Input : </div> </div>
First, your assignment is all wrong
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
You should be assigning the markup to a $scope property. e.g.
$scope.content = " <div> Input : <input type=\"text\" > </div> ";
Secondly you should use the $sce service to sanitize the html. Here's a plnkr where this code demonstrates the intended behavior
var app = angular.module('plunker', []);
app.controller('Ctrl', function($scope, $sce) {
$scope.name = 'World';
var ctrl = this;
$scope.click = function myCtrl(type) {
switch (type) {
case 1:
$scope.content = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
break;
case 2:
$scope.content = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
break;
default:
}
}
});
Note also that I changed your markup from input type="textarea" to a textarea element.
You should use $sce service with ngSanitize module:
angular.module('app', ['ngSanitize'])
.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
$scope.html = function(){
return $sce.trustAsHtml(`<div> Input : <input type=\"${$scope.type == 0 ? 'text' : 'textarea'}\" > </div>`);
}
}]);
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>
<body ng-app="app">
<div ng-controller="MyController" ng-init='type="0"'>
text: <input type="radio" ng-model="type" value="0">
textarea: <input type="radio" ng-model="type" value="1">
<div ng-bind-html="html()"></div>
</div>
</body>
A textarea can not render HTML input type like <input type=\"textarea\" >..
and try with $sce.
var app = angular.module('exApp',[]);
app.controller('ctrl', function($scope,$sce){
$scope.text = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
$scope.textArea = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div ng-bind-html="text"></div><br>
<div ng-bind-html="textArea"></div><br>
</body>
Use ng-if instead of ng-bind-html.
Something like this:
<div>
<div ng-if="type===1">Input : <input type="text"></div>
<div ng-if="type===2">Input : <input type="textarea"></div>
</div>
And in your controller, you will only need to dynamically assign type either 1 or 2 as value.
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 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