How copy value of input text to other Input texts elements in AngularJS 1.X
But each input has have his own property in controller
I've tried so far
<div class="paramWrap"> // copy from here
<label for="accoubntDis">Account Discount</label>
<input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis">
</div>
<pre>{{accoubntDis}}</pre> // only this displayed
<div class="space"></div>
<div class="paramWrap">
<label for="365Dis">O365 Exchange Unlicensed Discount</label>
<input id="365Dis" type="text" class="form-control" value="{{accoubntDis}}" ng-model="accoubntDis12">
</div>
<div class="space"></div>
<div class="paramWrap">
<label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
<input id="gSuiteO365" type="text" class="form-control" value={{accoubntDis}} ng-model="gSuiteO365">
</div>
What I see actually that only the <pre>{{accoubntDis}}</pre> is displayed
why value/ng-value={{accoubntDis}}/"accoubntDis" not worked in <input .... ??
Do I need to use any JS functions on controller side for this ?
The simplest and best approach would be to use ng-change instead of ng-value.
HTML code:
<input type = "text" ng-model = "first" ng-change = "changeSecond()"/>
<input type = "text" ng-model = "second"/>
Angular: js corresponding code
$scope.changeSecond = function() {
$scope.second = $scope.first;
}
I tried with "ng-value", its working in angular 1.5 and above.
If you angular is below 1.5 you can go for below approach.
So better you write a function call on change of input field1, and in
that function assign the value of field1 to field2. Consider the below sample example.
HTML:
<input type="text" ng-model="data" ng-change="updateField()">
<input type="text" ng-model="meta">
JS:
$scope.data;
$scope.meta;
$scope.updateField= function(){
$scope.meta=$scope.data;
}
Use ng-value directive.
<input ng-value="accoubntDis" />
Refer to this API doc.
BTW, as you're using ng-model, value will be overridden so that it seems to be not working.
<input ng-model="accoubntDis" />
In input doesn't need the {{}}, just go with value="accoubntDis" will do.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="paramWrap"> // copy from here
<label for="accoubntDis">Account Discount</label>
<input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis" ng-change="calculate()">
</div>
<pre>{{accoubntDis}}</pre> // only this displayed
<div class="space"></div>
<div class="paramWrap">
<label for="365Dis">O365 Exchange Unlicensed Discount</label>
<input id="365Dis" type="text" class="form-control" ng-value="accoubntDis2">
</div>
<div class="space"></div>
<div class="paramWrap">
<label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
<input id="gSuiteO365" type="text" class="form-control" ng-model="accoubntDis3">
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.accoubntDis = "100";
$scope.accoubntDis2 = $scope.accoubntDis * 2;
$scope.accoubntDis3 = $scope.accoubntDis / 2;
$scope.calculate = function(){
$scope.accoubntDis2 = $scope.accoubntDis * 2;
$scope.accoubntDis3 = $scope.accoubntDis / 2;
}
});
</script>
</body>
</html>
Use ng-value directive.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="paramWrap">
<label for="accoubntDis">Account Discount</label>
<input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis">
</div>
<pre>{{accoubntDis}}</pre>
<div class="space"></div>
<div class="paramWrap">
<label for="365Dis">O365 Exchange Unlicensed Discount</label>
<input id="365Dis" type="text" class="form-control" ng-value="accoubntDis" ng-model="accoubntDis12">
</div>
<div class="space"></div>
<div class="paramWrap">
<label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
<input id="gSuiteO365" type="text" class="form-control" value={{accoubntDis}} ng-model="gSuiteO365">
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.accountDis = "Hello World!";
$scope.accoubntDis=123;
});
</script>
<p>This example shows how to use AngularJS expressions to set the value of an input field.</p>
</body>
</html>
Related
I am new to angular js. Now I have an input where I have implemented a token field. Now, the value attribute of the input box has values in an array. Now I don't know how we can use that array in the html. Like
value="abc,pqr"
This works , But I have an array and that array I need to use in the html.
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should"
id="should"
type="text"
value=""
placeholder="should requirement"
class="form-control setmargin">
</div>
</div>
$scope.somevalues = ['abc','pqr','hhhh'];
This values are coming from the ajax call. Now I have bootstrap tokenfield so I need to have all this values in that input box . How can I use this array values in the html value atttibute ?
To clarify, you have an array of values coming from an ajax call, but you would like them to be comma-separated as a string?
You want to use the join function. This will combine all the elements in the array into a string, separated by the string as the parameter (in this case, a comma).
var somevar = ['abc','pqr','hhhh'].join(',');
document.getElementById('should').value = somevar;
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should"
id="should"
type="text"
value=""
placeholder="should requirement"
class="form-control setmargin">
</div>
</div>
You should describe it better what you want to do.
But, you can join the array: ["abc", "pqr", "hhhh"].join(','), which will give you "abc,pqr,hhhh".
If you want that to appear in your <input>, then add ng-model="value" to it, and populate it in your controller: $scope.value = ...;. Here is a demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.somevalues = ['abc', 'pqr', 'hhhh'];
$scope.value = $scope.somevalues.join(',');
$scope.toArray = function(){
$scope.somevalues = angular.copy($scope.value.split(','));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should" id="should" type="text" ng-model="value" ng-change="toArray()" placeholder="should requirement" class="form-control setmargin">
<div>To string: {{value}}</div>
</div>
<div>To array: {{somevalues}}</div>
</div>
</div>
try to convert tostring() like
$scope.somevalues = ['abc', 'pqr', 'hhhh'].toString();
Copied Snippet from #richard
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.somevalues = ['abc', 'pqr', 'hhhh'].toString();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should" id="should" type="text" ng-model="somevalues" placeholder="should requirement" class="form-control ">
</div>
</div>
</div>
I have two forms(in one page). On first form there are two buttons NEXT and BACK. On clicking on the next i will render next form on page. I am using ng-if for this condition.
<form name="otpform" novalidate ng-if="renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" placeholder="{{ 'OTP' | translate }}" ng-model="otp" required >
<input type="button" value="{{ 'BACK' | translate }}" class="brown-button" ng-click="gotoAck()">
<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="checkotp()">
</div>
</fieldset>
</form>
Below is my js code.
$scope.checkotp = function () {
debugger;
var otpvalue;
$scope.otp = {};
otpvalue = $scope.otp; //undefined
}
When I try to access the otp model I am getting undefined property. On previous form I have next button. Inside next button I have $scope.renderotpform = true; so that above form is shown. May I know why I am not able to access OTP in the above code?
ng-if creates its own scope. So the otp inside ng-if is not binded directly to the controller.You can either bind the model to an object or use controller as syntax. The controller as syntax implicitly takes care of the dot rule.
For more info:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
AngularJs "controller as" syntax - clarification?
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm=this;
vm.renderotpform = true;
vm.checkotp = function() {
console.log(vm.otp);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<form name="otpform" novalidate ng-if="vm.renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" ng-model="vm.otp" required>
<input type="button" value="BACK" class="brown-button" ng-click="vm.gotoAck()">
<input type="submit" value="NEXT" class="blue-button" ng-click="vm.checkotp()">
</div>
</fieldset>
</form>
</div>
Make all ng-models of the Form from one Object..
It would work and there are other advantages for this like you could easily reset and post data with just one object.:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formData = {};
$scope.renderotpform = true;
$scope.checkotp = function() {
console.log($scope.formData.otp);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="otpform" novalidate ng-if="renderotpform">
<fieldset ng-disabled="otpdisable">
<div class="middle-container steps fourth-step overflow-hidden" id="divotp">
<input class="" type="text" name="otp" ng-model="formData.otp" required>
<input type="button" value="BACK" class="brown-button" ng-click="gotoAck()">
<input type="submit" value="NEXT" class="blue-button" ng-click="checkotp()">
</div>
</fieldset>
</form>
</div>
My problem is pretty simple but elusive in nature. When you will load the index.php, (as localhost using xampp) you will be presented with a simple form. Now there are multiple elements on this form, and it's still a work in progress, so the possibility of multiple bugs is plausible. However, there's this one bug that's really annoying.
THE PROBLEM:
On changing the Due Date element, the content of the following input
boxes changes due to the fact that they're bind with it. Now it won't
matter how many times you change the due date, because every time the
value in the fields will change accordingly, Thanks to angularjs.
The BUG creeps in when you change the value of an input field. Say
originally it was 27 and then you changed it to , idk say 10.* NOW
IF YOU CHANGE THE DUE DATE, THE ALTERED INPUT FIELD REMAINS THE SAME
* I.E. WITH VALUE 10, WHEREAS I WANT IT TO CHANGE NEVERTHELESS.
Moreover, if one of you guys is the apotheosis of angularjs coders,
and he got some tips for me, I would just like to say..... "I APPRECIATE
THAT".
index.php
<!-- addService.html -->
<?php
$version = time();
?>
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap and our custon css files) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- JS (load angular, ui-router and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="ctrl-add-service.js"></script>
<script src="services.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="ctrl-add-service">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1 align="center">SERVICE FORM</h1>
<form role="form" ng-submit="createService()">
<div>
<label>Service Name</label>
<input type="text" class="form-control" placeholder="Enter service name here" ng-pattern="/^[a-zA-Z0-9_]*$/" required>
</div>
<div class="row">
<div class="col-md-6">
<label>Due Date</label>
<input type="date" class="form-control" ng-model='dueDate' ng-change="setFields()" required>
</div>
<div class="col-md-6">
<label>Task Date</label>
<input type="date" class="form-control" required>
</div>
</div>
<div style="margin-top: 20px;margin-bottom: 20px;" align="center">
<label>Period</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='12' ng-change="setFields()">Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='6' ng-change="setFields()">Semi-Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='4' ng-change="setFields()">Quarterly</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='1' ng-change="setFields()">Monthly</label>
</div>
<div align="center">
<div>
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[0]' ng-required='!fields[0]'></div>
<div style="display:inline-block;"><label>Feb</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[1]' ng-required='!fields[1]'></div>
<div style="display:inline-block;"><label>Mar</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[2]' ng-required='!fields[2]'></div>
<div style="display:inline-block;"><label>Apr</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[3]' ng-required='!fields[3]'></div>
</div>
<div style="display:inline-block;"><label>May</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[4]' ng-required='!fields[4]'></div>
<div style="display:inline-block;"><label>Jun</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[5]' ng-required='!fields[5]'></div>
<div style="display:inline-block;"><label>Jul</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[6]' ng-required='!fields[6]'></div>
<div style="display:inline-block;"><label>Aug</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[7]' ng-required='!fields[7]'></div>
<div>
<div style="display:inline-block;"><label>Sep</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[8]' ng-required='!fields[8]'></div>
<div style="display:inline-block;"><label>Oct</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[9]' ng-required='!fields[9]'></div>
<div style="display:inline-block;"><label>Nov</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[10]' ng-required='!fields[10]'></div>
<div style="display:inline-block;"><label>Dec</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[11]' ng-required='!fields[11]'></div>
</div>
</div>
<div align="center" style="margin-top: 20px;">
<button type="submit" class="btn btn-primary">Create</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
ctrl-add-service.js (controller)
// ctrl-add-service.js Controller for the add service option in the nav bar of the home screen.
var mainApp = angular.module("mainApp",[]);
mainApp.controller('ctrl-add-service',function($scope, DueDateService){
$scope.value ='1';
$scope.setFields = function() {
$scope.date = DueDateService.date($scope.dueDate);
$scope.fields = DueDateService.fields( DueDateService.month($scope.dueDate), $scope.value); // first parameter passes month in int, second parameter passes period value in int.
};
});
services.js (services for the app)
// services.js services.js of the account direcotry of the project. It is used by the mainApp.
//DueDateService
mainApp.service('DueDateService', function(){
this.month = function(date) {
var temp = new Date(date);
month = temp.getMonth();
console.log(month+1+" is the month");
return (month+1);
};
this.date = function(date) {
var temp = new Date(date);
date = temp.getDate();
console.log(date+" is the date");
return (date);
};
this.fields = function(month,period) {
var lap = parseInt(period); // possible values of lap can be [12,6,4,1]
var iteration = 12/lap; // possible values of iteration can be [1,2,3,12]
var selectedFields = [true,true,true,true,true,true,true,true,true,true,true,true];
for (var i=1; i<=iteration; i++) {
if(month>12) {
month = month - 12;
}
selectedFields[month-1]= false;
month = month + lap;
}
return selectedFields;
};
});
I think you need to change the ng-value to ng-model and create an Array of your dates, like this:
ng-model='dates[0]'
ng-model='dates[1]'
ng-model='dates[2]'
...
And your controller would be like this:
var date = DueDateService.date($scope.dueDate);
$scope.dates = Array(12).fill(date);
See at this plunker: https://plnkr.co/edit/p8O14Y80hCWyNmxnYxbF
In following lines why are you taking ng-value, As far as I think you will have to take ng-model="date" And this will work fine.
see the ng-value usages
https://docs.angularjs.org/api/ng/directive/ngValue
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-model="date" ng-disabled='fields[0]' ng-required='!fields[0]'></div>
I am a beginner and i have a problem in creating a review form using angular js. I've got the input value in an empty array. but i don't know were to push that fetched content so that it will be displayed in the web page(inside the blockquote).please give a simple and understandable answer
HTML
<section class="container" ng-controller="storeController as store">
<div class="row">
<div class="col-md-12" style="margin-top:100px;" ng-controller="ReviewController as reviewCtrl">
<div class="review_form">
<blockquote>
<h3>{{reviewCtrl.review.name}}</h3>
<p>{{reviewCtrl.review.age}}</p>
<p>{{reviewCtrl.review.mail}}</p>
</blockquote>
</div>
<form class="col-md-4 form-group" ng-submit="reviewCtrl.addreview()">
<input type="text" id="name" class="form-control" placeholder="name" ng-model="reviewCtrl.review.name"><br>
<input type="text" id="age" class="form-control" placeholder="age" ng-model="reviewCtrl.review.age"><br>
<input type="mail" id="mail" class="form-control" placeholder="mail" ng-model="reviewCtrl.review.mail"><br>
<input type="submit" class="btn-block btn btn-success" value="Submit Review">
</form>
</div>
</div>
</section>
JavaScript
(function(){
var app=angular.module('store',[]);
app.controller('storeController',function(){
this.product=gem;
});
app.controller('ReviewController',function(){
}
this.review={};
this.addreview=function($scope){
push(this.review);
this.review={};
};
});
var gem=[
{name:'Dodecaheadron',price:2.9,desc:[{comment:'this product is good !'}],avail:true,stock:false},
{name:'Octaheadron',price:2,desc:[{comment:'this product is good !'}],avail:false,stock:true},
{name:'Tetraheadron',price:3.25,desc:[{comment:'this product is good !'}],avail:true,stock:false},
{name:'Pentaheadron',price:4,desc:[{comment:'this product is good !'}],avail:true,stock:false} ];
})();
You have a lot of errors in your JavaScript:
app.controller('ReviewController',function(){
} // Guess you need to change to this });
Solution:
app.controller('ReviewController',function(){
});
Final Script:
(function(){
var app=angular.module('store',[]);
app.controller('storeController',function(){
this.product=gem;
});
app.controller('ReviewController',function(){
});
this.review={};
this.addreview=function($scope){
push(this.review);
this.review={};
};
})();
var gem=[
{name:'Dodecaheadron',price:2.9,desc:[
{comment:'this product is good !'}],avail:true,stock:false},
{name:'Octaheadron',price:2,desc:[
{comment:'this product is good !'}],avail:false,stock:true},
{name:'Tetraheadron',price:3.25,desc:[
{comment:'this product is good !'}],avail:true,stock:false},
{name:'Pentaheadron',price:4,desc:[
{comment:'this product is good !'}],avail:true,stock:false}
];
I have put together what I thought would be a very simple example of how I could fire off a function from a checkbox being checked in angular and have that function check to see the new value of the checkbox and accordingly display or not display a message. It works, but only after I have checked and unchecked the box at least once. For this reason I figured I simply would need to default the checkbox value to false and that would take care of the problem but it didn't. Can anyone help me tweak this to get it working and if so, maybe explain why my thinking is flawed, what do I not understand about the $scopes state. BTW it is also flipped, meaning that when I check the box the message goes away and when I uncheck it it says it's checked.
I am doing these exercises to get a better idea how angular works and I know deep down this is a javascript issue, but I still don't have it figured out. Any help is appreciated
app.js
var formApp = angular
.module('formApp', [])
.controller('formController', function($scope) {
$scope.formData = {};
$scope.redCheckFunction = function() {
if ($scope.formData.favoriteColors.red == true){
$scope.redMessage = "red is checked";
} else {
$scope.redMessage = "";
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div>
<h2>Angular Checkboxes</h2>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name"
ng-model="formData.name">
<label>Description</label>
<input type="text" class="form-control" name="description"
ng-model="formData.description">
</div>
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.red"
ng-init="favoriteColors.red.disabled=false"
ng-click="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.green"> Green
</label>
</div>
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
<h2>{{redMessage}}</h2>
</form>
<h2>Sample Form Object</h2>
<pre>
{{ formData }}
</pre>
</div>
</body>
</html>
I created a pen to make things easier:
Checkbox Pen
ng-click is fired before the model is updated:
Note that ngClick events will occur before the model is updated.
You need to use the ng-change directive:
Evaluate the given expression when the user changes the input.
http://codepen.io/anon/pen/azaJob
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
When you enter the function redCheckFunction the value is already updated.