I want to replace tags with radio buttons inside ng-repeats with angular and json. I display a list of products that have sub products. I would like to be able to put a radio button beside each sub product (eg. Product1-Type1) and group them by the parent product code (eg. Product1) If a user selects a sub product, the "Selected" value would be set to true and the other sub products would be set to false. And also call the displayFullPricing(prices) function.
Here is the code used to display the json (working)
<div ng-repeat="product in groups.Products">
<h3>{{product.Code}}</h3>
<div ng-repeat="prices in product.Prices">
{{prices.Code }} - {{prices.monthly.RetailPrice}}
<a ng-click="displayFullPricing(prices)">select</a>
</div>
</div>
And the json I am using...
{
"ID":"",
"Groups":[
{
"Products":[
{
"Code":"Product1",
"Prices":[
{
"Code":"Product1-Type1",
"Monthly":{
"RetailPrice":2,
"MinimumPrice":4
},
"Selected":false
},
{
"Code":"Product1-Type2",
"Monthly":{
"RetailPrice":5,
"MinimumPrice":2
},
"Selected":false
}
]
},
{
"Code":"Product2",
"Prices":[
{
"Code":"Product2-Type1",
"Monthly":{
"RetailPrice":7,
"MinimumPrice":3
},
"Selected":false
},
{
"Code":"Product2-Type2",
"Monthly":{
"RetailPrice":2,
"MinimumPrice":8
},
"Selected":false
}
]
}
]
}
]
}
Could anyone help me achieve this? I had tried moving ng-click into a radio button but it didnt work. Many thanks
Here is plunker for you.
Key thing is giving same name for radio groups so I give name with using their parent product.
<input type="radio" name="group-{{product.Code}}" ng-model="subProduct.Selected">{{subProduct.Code}}
for function call you can use ng-click.
<input type="radio" ng-click="displayFullPricing()" name="group-{{product.Code}}" ng-model="subProduct.Selected">{{subProduct.Code}}
Related
I have this array of objects. In each object there is another array.
panels = [{
Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
Name: "Celiac test",
Tests: [{
Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
Name: "test 1 (DGP) IgG"
},
{
Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
Name: "test 2 (DGP) IgG"
},
{
Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
Name: "test 3 (DGP) IgG"
}
]
}, and so on],
I have mapped it to a bootstrap accordion with checkboxes.
First there is a checkbox for the main object, then checkboxes for the array within that object.
What I want is that when I click on the main Panel checkbox it should select the Tests checkboxes and save the panel object in the object variable, say selectedPanel, and when I deselect the main Panel it should deselect all the Tests checkboxes too.
but the main thing is that when I deselect one of the Tests checkboxes it should be removed from selectedPanel.
and the issue is it should be done on basis of Id, not checked/selected coming from backend.
Can anyone help me in this regard?
I have created a stackblitz too:
Stackblitz
Try modifying your checkItem() as below
checkItem(panel: any) {
panel.isChecked = !panel.isChecked;
panel.Tests.forEach(e => {
e.isChecked = true;
});
}
When you are done, your panels object will hold the statues of all checkboxes.
First create array which will hold selected checkboxes. This array will hold id of selected panels/tests.
selectedCheckboxes: [];
To make binding with checkbox "checked" attribute you will need another param to your object, let's call it "checked" for simplicity.
checked: true/false
In your HTML code
<input type="checkbox" class="form-check-input ml-5" id="{{panel.Id}}" name="{{panel.Name}}" (change)="togglePanelCheck(panel)" [checked]="panel.checked">
<input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" [checked]="test.checked" (change)="toggleCheck(test)">
Code for toggle checking:
togglePanelCheck(panel){
if(panel.checked){
this.uncheckPanel(panel);
} else {
this.checkPanel(panel);
}
}
checkPanel(panel){
this.checkItem(panel);
if(this.panelHasTests()){
panel.tests.foreach(test => {
this.checkItem(test);
});
}
}
uncheckPanel(){
this.uncheckItem(panel);
if(this.panelHasTests()){
panel.tests.foreach(test => {
this.uncheckItem(test);
});
}
}
toggleCheck(item){
if(item.checked){
this.uncheckItem(item);
} else {
this.checkItem(item);
}
}
checkItem(item){
this.selectedCheckboxes.push(item.id);
item.checked = true;
}
uncheckItem(item){
const index = this.selectedCheckBoxes.indexOf(item.id);
this.selectedCheckBoxes.splice(index, 1);
item.checked = false;
}
private panelHasTests(panel) : boolean {
return panel.tests && panel.tests.length != 0;
}
Tried my level best please help me out..
I am making an angular dynamic form with a form splitting into total of three parts in which the two parts were made already. Now I am making part three which will be generated by selecting an option from dropdown...
Even those part also is done...
But I am unable to make a form array in it... As I am new in angular please help me.
HTML:
Form part 3 will be here which will be array
<select multiple (change)="changeEvent($event)">
<option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>
<div *ngFor="let item of array">
{{item.value}} is the parent
<div *ngFor="let child of item.templateChild">
{{child.property_name}}
<div *ngFor="let partThree of questionsParthree">
<ng-container>
<app-question [question]="partThree" [form]="formPartThree"></app-question>
</ng-container>
</div>
</div>
</div>
Select Box change event:
changeEvent(e) {
if (e.target.value == 1) {
this.array = [];
this.array.push(
{
key: 1, value: "Template one",
templateChild: [
{ property_name: "Property one" },
{ property_name: "Property two" }
]
}
);
let propertiesArray = [];
this.array.forEach(element => {
element.templateChild.forEach(data => {
propertiesArray.push(
{
key: data.property_name,
label: data.property_name,
"elementType": "textbox",
"type": "text"
}
)
});
});
this.questionsPartThree = this.service.getQuestions(propertiesArray);
this.formPartThree = this.qcs.toFormGroup(this.questionsPartThree);
this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, form3: this.formPartThree });
}
}
Continuation like part 1 and 2..
I have posted the code related to creating the form array alone..
Updated Stackblitz https://stackblitz.com/edit/angular-x4a5b6-mnyifs
Here if we select any option then you will get the input boxes with values..
I would like to create array with it like,
If we select the first option Template One, Output expected is exactly as like
"templateChild" : [
{"property_one": "", "property_two":""}
]
So the final output of whole form going to be if i select Template One and also Template Two from select box (as select box is multi select),
{
"form1": {
"project_name": "",
"project_desc": ""
},
"form2": {
"property_one": "",
"property_two": ""
},
"template_details" : [
{ "template_name": "Template One",
"templateChild" : [{"property_one": "", "property_two":""}]
},
{ "template_name": "Template Two",
"templateChild" : [{"property_three": "", "property_four":"",
"property_five":""}]
}
]
}
Have a work around in the demo i have provided and give me a better solution..
Kindly please help me to create a form as like the above when we select an option from dropdown.. If i am wrong in my approach also please correct me..
If i finish this third part then everything will get alright any angular technical expert please help me..
Taking too long please help me out..
You can dynamically change an AbstractController inside a FormGroup using the setControl() method.
Add an empty form3 part for the moment
this.form3 = new FormGroup({});
this.formJoin = new FormGroup({ form1: this.form, form2: this.formPartTwo, form3: this.form3 })
When selecting an item, generate a new FormGroup according the form you create.
if (e.target.value == 1) {
this.array = [];
this.form3 = new FormGroup({'Property one': new FormControl('insert whatever you want')});
this.formJoin.setControl('form3', this.form3);
You should be able to do something what that start!
On my page I have angular ui accordion, inside of each panel, I'm rendering list with items and checkboxes, also I have checkbox "select all".
For selection method and logic I used this resource. In this resource logic seems working, but however I'm putting this logic to my code, it stops working.
What I want to achieve is when all checkboxes are selected, checkbox "select all" has been selected automatically, and if some of checkboxes is unselect, checkbox "select all" has to be unselect as well.
I have tried multiple suggestions provided here, here, here, but in the end I'm getting the same result.
I appreciate if somebody could help me to resolve my problem.
$scope.categories = [
{
id: 1,
name: "category 1"
},
{
id: 2,
name: "category 2"
},
{
id: 3,
name: "category 3"
}
]
$scope.selectedAll = false;
$scope.selectAll = function(array) {
$scope.selectedAll = !$scope.selectedAll;
angular.forEach(array, function(item) {
item.Selected = $scope.selectedAll;
});
};
$scope.checkIfAllSelected = function(array) {
$scope.selectedAll = array.every(function(item) {
return item.Selected == true
})
};
html
<div>
<div class="row" ng-class="{'selected': selectedAll, 'default': !selectedAll}">
<div>Select all
<input type="checkbox"
ng-model="selectedAll" ng-click="selectAll(categories)" >
</div>
</div>
<div class="row" ng-repeat="item in categories | orderBy : 'id'" ng-class="{'selected': item.selected, 'default': !item.selected}">
<div > {{ item.name }}
<input type="checkbox"
ng-model="item.Selected" ng-click="checkIfAllSelected(categories)"
>
</div>
</div>
This is my plunker
Please take a look at this fork of your plunker: https://plnkr.co/edit/OW3F1VMke9iLuNkt5p3o?p=preview
Two things:
1. It's a good practice to create an object to your view model (you can find it under the name model in the plunker $scope.model. This will solve 2 way data binding issues.
2. I have changed the ng-click to ng-change (this is not part of the solution though - its just more correct in my opinion).
Please let me know if you need more clarifications.
Im currently trying to nest a <select> inside a div with a ng-repeat
something like this:
<li ng-repeat="item in items >
<div class="row">
<div class="col-xs-7">
<span ng-bind="item.Name"></span>
</div>
<div class="col-xs-4 modal-body--ul--li__dropdown_container">
<select ng-model="typemodel" >
<option ng-repeat="usertype in item.userGroups"></option>
</select>
</div>
<div class="col-xs-1">
<a ng-click="add(item)"></a>
</div>
</div>
</li>
In the controller im adding the item to a new list with selected items. I also want to add the value from the dropdown as a new value to the list in the controller.
$scope.add = function (item) {
//New value with the value from the dropdown
item.recipientType = typemodel;
$scope.selected.push(item);
};
The list :
$scope.items = [
{
"Name":"Name1",
"userGroups":[
{ "type": "gruop1" },
{ "type": "gruop2" },
{ "type": "group3" }
]
},
{
"Name":"Name2",
"userGroups":[
{ "type": "gruop1" },
{ "type": "gruop2" },
{ "type": "group3" }
]
}
]
In short i need the selected value from the dropdown when i hit the "add", the value of the current typemodel.
This is how it looks now, but it dont work. I know i have to get the correct model and maybe track the items list by $index, but after searching the web the whole day for a solution, im still stuck!
All help is appreciated.
-Thanks!
ps. please comment if something is missing from the question, or something more is needed to solve this.
First, change your dropdown list to
<select ng-options="usertype in item.userGroups" ng-model="item.recipientType">
Then when you trigger the add function, item's property recipientType is already set.
$scope.add = function (item) {
console.log(item.recipientType);
$scope.selected.push(item);
};
I have a data model persons which takes the following form:
personsInfo = {
name: Adam
dob: 31-FEB-1985
docs: [
{
docType: Drivers License,
number: 121212,
selected: false
id: 1
},
{
selected: true,
docType: None
},
{
docType: State ID,
number: 132345,
selected: false,
id: 2
}
]
}
In my markup I have defined the following to dynamically generate radio buttons.
<div ng-repeat="personDoc in personsInfo.docs">
<input type="radio" name="personDocs" ng-model="personDoc.selected" value=""/>
{{personDoc.docType}} <span ng-hide="personDoc.docType === 'None'">Number: {{personDoc.number}}</span>
</div>
I want to be able to check the documents which have selected as true on page load, and then depending on what the user selects save the selected flag in my personsInfo model.
My intent here is to send the personsInfo model back to another page.
If somebody could point me to a working fiddle it would be greatly appreciated!
Thanks!
You're almost there just missing the binding to show which document is selected. We'll add an object to the scope to represent the selected item, then bind the forms to that model.
JS
app.controller('...', function($scope) {
$scope.personInfo = { ... };
$scope.selectedDoc = {};
$scope.$watch('personInfo',function() {
$scope.selectedDoc = $scope.personInfo.docs[0];
});
});
HTML
<div ng-repeat='doc in personInfo.docs'>
<input type='radio' ng-model='selectedDoc' value='doc' /> {{doc.docType}}
</div>
<form>
<input type='text' ng-model='selectedDoc.number' />
...
</form>