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}
];
Related
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>
I've got a strange problem with my angular5 application, I am trying to do simple form submit
ts
export class NewFormComponent implements OnInit {
formSlug:'';
newForm = {
title:"",
description:" ",
allowMultiSubmit:""
}
//create new form
createForms() {
this.formsSandbox.createNewFormPartial(newForm).subscribe((result: any) => {
console.log('created');
});
}
}
HTML
<div class="new_form_wrap_body">
<div class="new_form_content">
<div class="new_form_content_row">
<input type="text" placeholder="Title" class="new_form_input" [(ngModel)]="newForm.title">
</div>
<div class="new_form_content_row">
<textarea class="new_form_textarea" [(ngModel)]="newForm.description" maxlength="250" placeholder="Description"></textarea>
</div>
<div class="new_form_content_row">
<div class="checkbox">
<label>
<div class="check_outer">
<input name="" type="checkbox" [(ngModel)]="newForm.allowMultiSubmit">
<div class="check" for="1_in"></div>
</div>
</label>
<span>Allow multiple submission</span>
</div>
</div>
<!-- <div class="new_form_content_row">
<input type="text" placeholder="Add Collaborators" class="new_form_short_input">
</div> -->
</div>
</div>
<div class="new_form_wrap_footer">
<ul>
<li>
<button (click)="createForms()" class="new_form_footer_next">Create</button>
This works fine in development. When I pushed this on to testing server which served under apache (dist folder is uploaded ) ngModel is not updating values on newForm on the first click(trigger createForms()).On the second click newForm is updated with form value
Does any one know why this is happening??
im trying to clone elements when I click the button. So far, I don't know, what the problem is about my code. I think it looks kinda right, could you please look over, and tell/describe me the problem? I mean, I read a lot of documentation about clonenode, and I just do the same. And when I look over my code, it does make sense to me, but it doest want to work... D:
The button should clone the whole field(inputCar)
Here is my fiddle https://jsfiddle.net/7k1sb7w0/
This is the html code:
<button id="buttonBtn">Clone Field</button>
<div id="inputCar">
<div class="column">
<label class="heading">Invite Persons</label>
</div>
<div class="medium-6 column">
<label for="ext-name">Name</label>
<input id="ext-name" type="text">
<input type="checkbox">
<label for="check7"></label>
<label>BMW</label>
<input type="checkbox" checked="true">
<label for="check8"></label>
<label>Ford</label>
</div>
<div class="medium-6 column">
<label for="ext-mail">E-Mail</label>
<input id="e-mail" type="email">
<datalist id="members"></datalist>
<button class="deletePerson">delete</button>
<label class="delete_btn">delete Field</label>
</div>
<br>
</div>
and this is my jsfile:
var clickBtn = document.querySelector('#buttonBtn');
var field = document.querySelector('#inputCar');
var i = 0;
clickBtn.addEventlistener('click', function(e) {
var cloneField = field.cloneNode(true);
cloneField.id = "inputCar" + i++;
field.parentNode.appentChild(cloneField);
}
Thank you in advance,
mark
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 creating a checkout page and I cannot figure out how to do the following. When the customer enters their shipping information, I want to display that same information further down the page in a confirmation section. I will not be submitting the information until the customer places the order, so there is no way to echo this information as I won't be submitting to my db until after they submit it.
I looked into this and I see things with a data-copy function and that is basically what I need except I do not want the copied data to show up in an input field. I just want it to display the text.
So if I had the following field:
Shipping street:
123 Main St.
I would want the 123 Main St to show up in a different section of the page.
I tried doing the data-copy function and I couldn't even get that to work. I'm not sure if this is the best method to use for this. I do not want the copied data to be editable. I have disabled that from my code.
I tried doing this:
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required> </div>
</div>
This is the confirmation part farther down the page:
<p><input type="text" class="preview" id="name" disabled></p>
The Jquery
$(document).ready(function() {
$(".preview").keyup(function() {
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
});
});
Is there a better way I can do this and most importantly an input field not show up with the copied data?
UPDATED CODE
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
Confirmation part
<p>Shipping to:</p>
<p><div class="preview" id="name"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
Is this what you want?
Note that data-copy="name" should now be data-copy="#name" for it to work
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
</div>
</div>
<br>
Your name is:
<div id="name"></div>
Simply change
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
to
$('#name').val($('#ShipToFullname').val());
Basicaly it says to set the value of id nameto the value of id ShipToFullname
Here the fiddle => http://jsfiddle.net/9sgcydmg/1/
If you don't want to output the data in another input you can simply set an id to any html element and use instead:
$('#name').html($('#ShipToFullname').val());
Here the fiddle => http://jsfiddle.net/89oeyq0h/
FINAL ANSWER : in it's most simple way, using jQuery, i would do something like this:
<input onkeyup="$('#name').html(this.value)" ... />
<p id='name'></p>
<input onkeyup="$('#addr').html(this.value)" ... />
<p id='addr'></p>
and so on...
http://jsfiddle.net/oky005a0/