I would like to ask you how I can add a key
and a value to an object. I want to get values from textareas, which
are generated with the help of ng-repeat, and to push them to an object.
courses: {}
With postman it works fine
courses :{
"C#" : "C# 101",
"C++": "C++ Advanced"
}
I have a collection called courses. Then with ng-repeat I create a textarea for each course and from this form I would like to put a key and a value to the object courses. key: course_code, value: course_desc. The problem is that I do not know how to store in the in the DB.
<div class="form-group" ng-repeat="course in courses">
<label for="{{course.name}}">{{course.name}}: </label>
<textarea rows="3" ng-model="course.value" class="form-control"></textarea>
</div>
The form
Related
I need to create a form to register the partners of a company.
There is a checkbox, that when it is checked 1 field is enable and you can insert the information, for ex:
-> name of partner.
But if the user wants to register more the 1 partner, could be a button that create another field to insert other name.
How can I work with this name fields? When I used PHP, I put the field like this:
And I get the values = name[0] ... name[1] ...etc
In Angular 2, how can I do this?
you can create an array like
let fields: any = [{
checkbox: false,
textbox: ""
}];
use loop through the form elements using this array like this
<div *ngFor="let item of fields;">
<input type="checkbox" name="somename" [(ngModel)]="item.checkbox"/>
<input type="text" [disabled]="item.checkbox" name="somename" [(ngModel)]="item.textbox"/>
</div>
<button (click)="addField()">Add Another</button>
whenever user click on this button
addField(){
this.fields.push({
checkbox: false,
textbox: ""
});
}
thats it
i am trying to create a dynamic form in angular. if type is text, the input will be <input type="text">. If type is checkbox, it will display <input type="checkbox">
here is the data successfully requested from server that i put in controller $scope
.controller('FormCtrl', function($scope){
$scope.form_data = [
{"id":1,"question":"Name","type":"text","user_criteria":"faiz","answer":[]},
{"id":5,"question":"Hair Type","type":"checkbox","user_criteria":"Long","answer":[{"id_answer":10,"id_survey":5,"answer_txt":"Long"},{"id_answer":11,"id_survey":5,"answer_txt":"Short"}]}
];
$scope.updated_form = {};
});
this is the template
<div ng-repeat="fm in form_data">
<div ng-if="fm.type =='text'">
<label>{{fm.question}}</label>
<input type="text" ng-model="{{fm.user_criteria}}">
</div>
<div ng-if="fm.type =='checkbox'">
<div ng-repeat="ans in fm.answer">
<input type="checkbox"> {{ans.answer_txt}}
</div>
</div>
</div>
for the input type text value. it appears label print Name and the input value print faiz. the code are displayed successfully to the correct input type and value.
but i have 2 question.
is there a way in the checkbox to check the value of the user_criteria to check the checkbox input?
how to pass all this data into the $scope.updated_form so i can use the value from the input like this ?
$scope.updated_form = [
{"id":1, "user_criteria": "faiz new name"},
{"id":5, "user_criteria": "Short"}
];
i am stuck to pass the form data for processing since i am lost when it comes to nested loop in the checkbox
I made a small sample to resolve your issues:
http://jsbin.com/pahuwe/3/edit?html,js,output
I used a initial fill function, to transfer the data to updated_form field:
$scope.updated_form = [];
$scope.form_data.forEach(function(item) {
$scope.updated_form.push(item);
});
and I used input radio for select, but with model and value parameters:
<input type="radio" ng-model="fm.user_criteria" ng-value="ans.id_answer"/>
Use a same ng-model to permit select a unique response.
My understanding is, you want to know what user checked and inputted , you can use another model to store the user data.(You need to init the updated_form with ids) And for the checkbox, you need to add a function with ng-change to set the checked answer into related data. It will be like
<div ng-repeat="fm in form_data">
<div ng-if="fm.type =='text'">
<label>{{fm.question}}</label>
<input type="text" ng-model="{{updated_form[fm.id].user_criteria}}">
</div>
<div ng-if="fm.type =='checkbox'">
<div ng-repeat="ans in fm.answer">
<input type="checkbox" ng-model="theChecked" ng-change=" if (theChecked) updated_form[fm.id].user_criteria = ans.answer_txt; "> {{ans.answer_txt}}
</div>
</div>
I have set up a json containing a list of countries with an ID and Country code attached:
It looks like this:
$scope.countries = [
{"name":"Afghanistan","id":"AFG","country-code":"004"},
{"name":"Åland Islands","id":"ALA","country-code":"248"},
{"name":"Albania","id":"ALB","country-code":"008"},
{"name":"Algeria","id":"DZA","country-code":"012"}
]
I then use the ng-repeat directive to create checkbox inputs for every country.
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="{{country.id}}" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
However when I run the code I only get the following to display:
Location
checkbox here {{country.name}}
If I remove the ng-model part of the repeat my checkboxes generate fine but I need a unique ng-model to be attached to every checkbox
ng-model="{{country.id}}"
How would I go about attaching a unique ng-model value?
This answer (Generate ng-model inside ng-repeat) does not provide a unique ng-model value
I will suggest you, use:
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="myCountry.selected[country.id]" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
{{myCountry.selected}}
JS:
$scope.myCountry = {
selected:{}
};
I have a list of dynamically generated radio boxes.
<div id="Address" class="modal-body" ng-show="AData">
<h5>
Select the correct address information from the list below.
</h5>
<label class="list-group-item" ng-repeat="address in Addresses">
<input type="radio" class="SuggestAddresses" ng-model="SelectedAddress" name="grAVR" ng-value="address" />
{{values.AddressLine1}} {{values.City}} {{values.State}} {{values.Zip}}
</label>
</div>
I am trying to access the model SelectedAddress in my controller but its value is undefined in controller. When I store this radiobox model value in a predefined scope variable that is already in my controller, it works fine.
To add some explanation to the comment above, ng-model="adress.selectedAdress" will allow you to access the obects property.
Note that you are working with an object in a list, represented by adress in your ng-repeat. This corresponds to Adresses[adress].selectedAdress
I am new to Angular and i just cant wrap my head around that problem.
I have several checkboxes which will have a unique value each, like so:
<label ng-repeat="c in classes">
<input type="checkbox" ng-model="query" ng-true-value='{{c.name}}'>
<span>{{c.name}}</span>
</label>
Next i have this set of divs that should be filtered on a specific value like card.name , like so:
<div ng-repeat="card in cards | filter:query">
<h2>{{card.name}}</h2>
<p><em>{{card.text}}</em></p>
</div>
When checkbox with value 'Peter' is checked, all cards with card.name=Peter are shown. When checkbox 'Peter' and 'John' are shown all cards with card.name=Peter and =John are shown. How can i realize this?
I guess its more of a general concept/markup question...
You don't need to have two different variables, in fact that is the problem. Angular doesn't know how to tie them together.
The filter can look deep into the object for a specific key set to a specific value. In my example the filter looks for this particular selected attribute, only showing ones that are set to true Keeping everything in the same object keeps everything tied together.
<label ng-repeat="c in classes">
<input type="checkbox" ng-model="c.selected" />
<span>{{c.name}}</span>
</label>
<div ng-repeat="card in classes | filter:{selected:true}">
<h2>{{card.name}}</h2>
<p><em>{{card.text}}</em></p>
</div>
Here is the data:
$scope.classes = [{
name: "John",
text: "Something about John"
},{
name: "Peter",
text: "Something about Peter"
}];
Note: that a selected attribute is added to each object when it is selected. This is the key we are filtering on.
Working example: http://jsfiddle.net/TheSharpieOne/y2UW7/
UPDATE:
After re-reading the question, it appeared to me that there would be multiple cards for the same name. A different approach would be needed.
In this case, multiple variables are needed, a list of checkboxes and a list of "cards". We also need a var to track which boxes are selected.
In this case we use a function to filter the list as 1 checkbox could change many "cards"
Example: http://jsfiddle.net/TheSharpieOne/y2UW7/1/