Hi I'm trying to put together the next object
$scope.passengers = {
adult : [ {firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"}],
child : [ {firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"}],
extras : "someValue"} ;
In my controller I have the following
$scope.passengers = {};
$scope.passengers.adult = [];
$scope.passengers.child = [];
$scope.numberAdult = 10;
$scope.numberChildren = 10;
Y las funciones
//Functions return an array null
$scope.getNumber = function(num) {
num = parseInt(num);
return new Array(num);
};
$scope.savePassengers = function(product_id)
{
//for the moment only print the variable
console.log($scope.passengers)
}
In My HTML page
<form name="passengers-form" ng-submit="savePassengers(product.id)">
<div class="col-lg-12">
<div class="form-horizontal">
<div class="row">
<div class="form-group" ng-repeat="a in getNumber(numberAdult) track by $index">
<label class="col-sm-3 control-label">Adult {{$index + 1 }}</label>
<div class="col-sm-3">
<input required ng-model="passengers.adult[$index].firstname" class="form-control" placeholder="First Name" type="text">
</div>
<div class="col-sm-3">
<input required ng-model="passengers.adult[$index].lastname" class="form-control" placeholder="Last Name" type="text">
</div>
</div>
<div class="form-group" ng-repeat="a in getNumber(numberChildren) track by $index">
<label class="col-sm-3 control-label">Child {{$index + 1 }}</label>
<div class="col-sm-3">
<input required ng-model="passengers.child[$index].firstname" class="form-control" placeholder="First Name" type="text">
</div>
<div class="col-sm-3">
<input required ng-model="passengers.child[$index].lastname" class="form-control" placeholder="Last Name" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Extras</label>
<div class="col-sm-6">
<textarea name="" ng-model="passengers.extras"class="form-control" id="" cols="30" rows="10"></textarea>
</div>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="form-group buttons pull-right">
<button class="btn btn-primary" id="guardar" type="submit">
<i class="fa fa-save"></i>Add to Cart ->
</button>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</form>
But, when i print the variable "passenger" , the console show : Object {extras: "someValue"}
Your problem is that ng-repeat creates an isolated scope, so your input fields are not reflecting in the correct scope. This can further be verified by your extras field being properly fulfilled.
You should change these lines in your HTML:
<input required ng-model="$parent.passengers.adult[$index].firstname" class="form-control" placeholder="First Name" type="text">
...
<input required ng-model="$parent.passengers.adult[$index].lastname" class="form-control" placeholder="Last Name" type="text">
And do the same thing for the children area.
Related
Hello guys my firebase real-time database update function is updating all the data with new data, I'm attaching the image of the database before the update
And after the update all the fields of A and B are changed into C, the source code is available below :
Frontend:
<form onsubmit="return false">
<input type="hidden" id="hiddenId">
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Course Code</label>
<input type="text" class="form-control uname-box" id="popupCourseCode" aria-describedby="emailHelp" placeholder="Course Code">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Course Title</label>
<input type="text" class="form-control uname-box" id="popupCourseTitle" aria-describedby="emailHelp" placeholder="Course Title">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Subject</label>
<input type="text" class="form-control uname-box" id="popupSubject" aria-describedby="emailHelp" placeholder="Subject">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Credits</label>
<input type="number" class="form-control uname-box" id="popupCredits" aria-describedby="emailHelp" placeholder="Credits">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Grades</label>
<input type="text" class="form-control uname-box" id="popupGrades" aria-describedby="emailHelp" placeholder="Grades">
</div>
</div>
</form>
Function:
function update() {
firebase.database().ref('academics').orderByKey().once('value', snap => {
snap.forEach((data) => {
var popupCourseCode = document.getElementById('popupCourseCode');
var popupCourseTitle = document.getElementById('popupCourseTitle');
var popupSubject = document.getElementById('popupSubject');
var popupCredits = document.getElementById('popupCredits');
var popupGrades = document.getElementById('popupGrades');
var updates = {
courseCode: popupCourseCode.value,
courseTitle: popupCourseTitle.value,
subject: popupSubject.value,
credits: popupCredits.value,
grade: popupGrades.value,
}
firebase.database().ref('academics/' + data.key).update(updates)
// alert('updated')
console.log(`Update FunctionKey!!!!!!!!!!!! >>>>>>>>> ${data.key}`)
})
// console.log(`Remove FunctionKey!!!!!!!!!!!! >>>>>>>>> ${data.key}`)
})
}
Please provide me a solution. Thanks in anticipation
I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!
I have an array that is shown with ng-repeat, also have a form to add data to this array. but I don't want to use button for submit this form, so I used ng-blur in each input and called a function that is adding data to my array, but there is a problem. when I use tab button to go to next input, data is added, but I am typing in second input of an empty form again
you can see my sample here : link
HTML CODE
<form ng-submit="addJobRecord()" id="job_records" class="ui-state-default info_box">
<a class="sortable-handler">
<i class="fa fa-arrows"></i>
</a>
<h4>old form</h4>
<div ng-repeat="x in job_records" class="info_box_body">
<div>
<div class="col-sm-6 pull-right">
<label>name: </label>
<input class="form-control" id="job_record_name" type="text" name="job_record_name" value="{{x.name}}" />
</div>
<div class="col-sm-6 pull-right">
<label>title: </label>
<input class="form-control" id="job_record_title" type="text" name="job_record_title" value="{{x.title}}" />
</div>
</div>
<div>
<div class="col-sm-6 pull-right">
<label>group: </label>
<input class="form-control" id="job_record_group" type="text" name="job_record_group" value="{{x.group}}" />
</div>
<div class="col-sm-6 pull-right">
<label>situation: </label>
<input class="form-control" id="job_record_situation" type="text" name="job_record_situation" value="{{x.situation}}" />
</div>
</div>
<div class="clearfix"></div>
<hr>
</div>
<div class="info_box_body" name="helpForm">
<h4>empty form</h4>
<div>
<div class="col-sm-6 pull-right">
<label>name: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_name" ng-model="JobRecordform.newJobName" placeholder="name" />
</div>
<div class="col-sm-6 pull-right">
<label>title: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_title" ng-model="JobRecordform.newJobTitle" placeholder="title" />
</div>
</div>
<div>
<div class="col-sm-6 pull-right">
<label>group: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_group" ng-model="JobRecordform.newJobGroup" placeholder="group" />
</div>
<div class="col-sm-6 pull-right">
<label>situation: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_situation" ng-model="JobRecordform.newJobSit" placeholder="situation" />
</div>
</div>
</div>
</form>
SCRIPT CODE
$scope.JobRecordform = {};
$scope.addJobRecord = function() {
//here $scope.user will have all the 3 properties
// alert(JSON.stringify($scope.form));
console.log($scope.JobRecordform);
$scope.job_records.push({
name: $scope.JobRecordform.newJobName,
title: $scope.JobRecordform.newJobTitle,
group: $scope.JobRecordform.newJobGroup,
situation: $scope.JobRecordform.newJobSit
});
$scope.JobRecordform = {};
};
$scope.job_records = [
{
name: "my job",
title: "my job title",
group: "my job group",
situation: "my job situation"
}
];
You just have to check if the $scope values are not null before pushing it to the array. I have updated your plunker. Please check
Here is my code:
<form class="form-horizontal"
name="commentForm"
ng-submit="submitComment()"
novalidate>
<div class="form-group"
ng-class="{ 'has-error has-feedback' : commentForm.name.$invalid && !commentForm.name.$pristine }">
<label for="name" class="col-sm-2 control-label">Your name</label>
<div class="col-sm-10">
<input type="text"
name="name"
class="form-control"
placeholder="your name"
ng-model="comment.name"
id="name">
<span class="help-block"
ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">
Name required
</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label" > Rating </label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value"
ng-value="{{star.value}}"
ng-model="comment.rating"
ng-checked="isSelected(star.value)">
{{star.value}}
</label>
</div>
</div>
<div class="form-group" ng-class="{'has-error has-feedback':comment.textComments.$error.required && !comment.textComments.$pristine}">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
here's my script
.controller('DishCommentController', ['$scope', function($scope) {
var stars=[
{value:"1"},
{value:"2"},
{value:"3"},
{value:"4"},
{value:"5"}
];
$scope.isSelected = function(checkStar){
console.log(checkStar==5);
return checkStar==5;
};
$scope.stars=stars;
$scope.comment={name:"",rating:"",textComments:"",date:""};
$scope.submitComment = function () {
$scope.comment.date=new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
$scope.dish.comments.push("Your JavaScript Object holding the comment");
}
}]);
please someone help me on this
You're missing 'required' attribute in your input fields and you're trying to access property of undefined object '$scope.dish.comments'.
See code below:
(function() {
'use strict';
angular.module('app', []).controller('DishCommentController', DishCommentController);
function DishCommentController($scope) {
var stars = [{
value: "1"
}, {
value: "2"
}, {
value: "3"
}, {
value: "4"
}, {
value: "5"
}
];
$scope.isSelected = function(checkStar) {
console.log(checkStar == 5);
return checkStar == 5;
};
$scope.stars = stars;
//select default values here
$scope.comment = {
name: "",
rating: 4,
textComments: "",
date: ""
};
$scope.submitComment = function() {
$scope.comment.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
// $scope.dish.comments.push("Your JavaScript Object holding the comment");
};
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="DishCommentController">
<form name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group">
<label for="name">Your name</label>
<div>
<input type="text" name="name" class="form-control" placeholder="your name" ng-model="comment.name" id="name" required>
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Name required</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label">Rating</label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value" ng-value="{{star.value}}" ng-model="comment.rating" ng-checked="isSelected(star.value)">{{star.value}}
</label>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" required placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
</body>
</html>
This is my script File..
app.controller('userController', function PostController($scope, userFactory) {
$scope.users = [];
$scope.user = { items : [] , attributes : [] };
$scope.editMode = false;
$scope.addItem = function (index) {
$scope.user.items.push({
Name: $scope.newItemName,
Value: $scope.newItemValue
});
};
$scope.deleteItem = function (index) {
$scope.user.items.splice(index, 1);
};
}
This is my HTML file
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.Name" class="form-control" id="title" placeholder="Your Name" required title="Enter your name" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.Address" class="form-control" id="title" placeholder="Your Address" required title="Enter your address" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">ContactNo</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.ContactNo" class="form-control" id="title" placeholder="Your ContactNo" required title="Enter your contactno" />
</div>
</div>
<div class="form-group">
<ul class="nav" class="col-sm-2" >
<label for="title" class="col-sm-2 control-label">Variations</label>
<div class="col-sm-10">
<input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemName" required placeholder="Name of new item...">
<input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemValue" required placeholder="Value of new item...">
</div>
<div class="col-sm-offset-3">
<button ng-click="addItem()" class="btn btn-primary" >Add Me</button>
<table class="table table-hover">
<tr data-ng-repeat="item in user.items">
<td>
<p>{{item.Name}}</p>
</td>
<td>
<p>{{item.Value}}</p>
</td>
<td>
<a ng-click="deleteItem($index)" class="delete-Item">x</a>
</td>
</tr>
</table>
</div>
</ul>
</div>
My doubt is that whenever I click addItem it will be stored as Name : "xxx", Value: "yyy", but i want it to be stored as xxx : yyy. Is there a way to do that. Im new to angular js. Please help me. Thank you
Try using this code in your addItem method:
$scope.addItem = function (index) {
var newItem = {};
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
In this code you first create an object for new item, and then create the property from newItemName and assign it a value from field newItemValue. Then you push this to an array.
One issue with this approach is that your bindings like <p>{{item.Name}}</p> will not work, because there is no property called Name anymore. I don't know why you want to store the data in the format you described, but in order to make the old bindings work you could also use old properties as well:
$scope.addItem = function (index) {
var newItem = {Name: $scope.newItemName, Value: $scope.newItemValue };
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
Use a map instead of a list for the items:
$scope.user = { items : {} , attributes : [] };
$scope.user.items[$scope.newItemName] = $scope.newItemValue;