I am new to angular JS.
I am getting the below JSONArray from a web service call. Requirement is to display the values from the sub array "options" and "text". My drop down should be displayed as that is generated from below HTML:
<select>
<option value="L1" > English </option>
<option value="L2" > French </option>
<option value="L3" > Chainese </option>
</select>
Here is the code that I have tried using angular ng-options:
<td data-ng-repeat="field in json">
<select tabindex="0" data-ng-options="option.code as option.code as option.text.label for option in field.options" data-ng-model="language_code">
<option value=""> Select...</option>
</select>
I am unable to access "options" or "text" arrays from the base object.
[{
"id": null,
"code": "Language",
"order": 1,
"options": [
{
"code": "L1",
"order": 1,
"text": [
{
"language": "eng",
"label": "English",
}
]
},
{
"code": "L2",
"order": 2,
"text": [
{
"language": "fre",
"label": "French",
}
]
},
{
"code": "L3",
"order": 3,
"text": [
{
"language": "chn",
"label": "Chainese",
}
]
}
]
}]
Please suggest solution.
You have strange JSON format:
here is working markup and plnker with full solution:http://plnkr.co/edit/OFyfJkTSgpoW2Gwkzzda
<table>
<tr>
<td ng-repeat="field in json">
<select tabindex="0" ng-model="selected" data-ng-options="option.code as option.text[0].label for option in field.options">
<option value=""> Select...</option>
</select>
{{selected}}
</td>
</tr>
</table>
Related
I have json file in assets/file.json.I used reactive form method.I Want to display details(only name) in a second drop down while selecting department.I have already displayed the dept in first drop down.but nothing seeing in second drop down.
[
{
"DEPT": "PHYSICS",
"details": [
{
"id": 164,
"name": "A",
},
{
"id": 265,
"name": "B",
}
]
},
{
"DEPT": "BIOLOGY",
"details": [
{
"id": 155,
"name": "C",
},
{
"id": 234,
"name": "D",
}
]
}
]
What i did is ...
first drop down
....................
<select formControlName="dept">
<option value="default">--Select a dept--</option>
<option *ngFor="let d of departments$" [value]="d.DEPT"> {{d.DEPT}} </option>
</select>
second drop down
......................
<select formControlName="details">
<option value="0">--All--</option>
<option *ngFor="let d of dept.value" [value]="d.details.name"> {{d.details.name}} </option> -->
</select>
I want to display when i select dept biology,second drop down should show the names C,D.
Try just write a basic code snippet for your required functionality. Try this I hope it'll help you out. Thanks
HTML
<select (change)="checkDepart($event.target.value)">
<option value="default">--Select a dept--</option>
<option *ngFor="let d of data; let i = index" [value]="i"> {{d.DEPT}} </option>
</select>
<select *ngIf="visibleDetail">
<option value="0">--All--</option>
<option *ngFor="let d of data[selectedDept].details" [value]="d.name"> {{d.name}} </option>
</select>
TS
visibleDetail: boolean;
selectedDept: number;
data = [
{
"DEPT": "PHYSICS",
"details": [
{
"id": 164,
"name": "A",
}, {
"id": 265,
"name": "B",
}
]
}, {
"DEPT": "BIOLOGY",
"details": [
{
"id": 155,
"name": "C",
}, {
"id": 234,
"name": "D",
}
]
}
]
checkDepart(e) {
this.visibleDetail = true;
this.selectedDept = e;
}
Below is the response returned from my service, i would like to bind this data to HTML selct dropdown. but the response looks like string not array.
"{"Codes":{ "CountryCodes": [ { "Code": "002", "Desc": "AFGHANISTAN" }, { "Code": "003", "Desc": "ALBANIA" }, { "Code": "004", "Desc": "ALGERIA" } ]}}"
Anyhelp would be appreciated.
You can do this,
<select [(ngModel)]="selectedElement">
<option *ngFor="let country of countryCodes.Codes.CountryCodes" [ngValue]="country.Code"> {{country.Desc}}</option>
</select>
DEMO
I have a select box that is populated with json. Here is the json...
{
"Connectivity": [
{
"product_id": 1,
"product_name": "SmartLink",
"product_price_attributes": [
{
"key": "postcodeA",
"type": "text"
},
{
"key": "BearerBW",
"type": "text"
},
{
"key": "Total bandwidth",
"type": "text"
}
]
},
{
"product_id": 2,
"product_name": "SmartNet",
"product_price_attributes": [
{
"key": "postcodeA",
"type": "text"
},
{
"key": "BearerBW",
"type": "text"
}
]
},
{
"product_id": 3,
"product_name": "Centralised Internet",
"product_price_attributes": [
{
"key": "BearerBW",
"type": "text"
}
]
}
],
"Cloud Services": [
{
...
}
]
}
I use this code in the controller to populate the drop down
$http.get('scripts/json/sample-products.json')
.then(function(res){
$scope.portfolio1 = res.data.Connectivity;
});
This creates the select box like this
<select ng-model="selectedProduct" ng-options="opt as opt.product_name for opt in portfolio1"
ng-change="getPriceAttributes()">
<option value="0" selected="selected" label="SmartLink">SmartLink</option>
<option value="1" label="SmartNet">SmartNet</option>
<option value="2" label="Centralised Internet">Centralised Internet</option>
When I pick an option from my select box getPriceAttributes() is fired. It looks like this...
$scope.getPriceAttributes = function() {
$http.get('scripts/json/sample-products.json')
.then(function(res){
$scope.formFields = res.data;
});
};
So my issue is that I don't know how I should drill down to get to the nested object 'product_price_attributes' for a selected product. I'm not sure what I need to pass to getPriceAttributes or what I need to change to the function to get it working.
Any ideas?
Many thanks
selectedProduct is set to be opt - which is each item in the Connectivity array, so simply:
console.log($scope.selectedProduct.product_price_attributes)
You can also pass in the model as a param to the change function:
$scope.getPriceAttributes = function(item) {
console.log(item.product_price_attributes)
...
}
<select ng-model="selectedProduct" ng-options="opt as opt.product_name for opt in portfolio1" ng-change="getPriceAttributes(selectedProduct)">
This is my JSON object:
{
Stores: [
{
Name: "Store #1",
DealerType: "Office"
},
{
Name: "Store #2",
DealerType: "Office"
},
{
Name: "Store #3",
DealerType: "Office"
},
{
Name: "Store #4",
DealerType: "Headquater"
},
]
}
This is my view:
<select id="dealerType">
<option value="">All</option>
<option value="Office">Office</option>
<option value="Headquater">Headquaters</option>
</select>
<ul>
<li ng-repeat="store in stores | filter:dealerType">{{store.Name}}</li>
</ul>
I want to only show the one store with DealerType: "Headquater" on pageload and still be able to use the filter functionality from the <select>-element
I have tried to change the ng-repeat to: ng-repeat="store in stores | filter:{DealerType: 'Headquater'} | filter:dealerType".
This does filter by the DealerType, but will not be changed when I update the "dealerType" select.
http://jsbin.com/fuwaki/1/edit
<div ng-app="app">
<div ng-controller="fCtrl">
<select id="dealerType" ng-model="dealerType">
<option value="">All</option>
<option value="Office">Office</option>
<option value="Headquater">Headquaters</option>
</select>
<ul>
<li ng-repeat="store in stores | filter:dealerType">{{store.Name}} | {{store.DealerType}}</li>
</ul>
</div>
</div>
var app = angular.module('app',[]);
app.controller('fCtrl', function($scope){
$scope.stores= [{
Name: "Store #1",
DealerType: "Office"
}, {
Name: "Store #2",
DealerType: "Office"
}, {
Name: "Store #3",
DealerType: "Office"
}, {
Name: "Store #4",
DealerType: "Headquater"
} ];
$scope.dealerType = 'Headquater'
});
Two things:
Use ng-model
Make sure you set the select to be part of the model,
<select ng-model="dealerType">...</select>
Filter expression
Use the appropriate filter expression to target your property to the model defined above.
<li ng-repeat="store in stores | filter:{'DealerType': dealerType}:true">{{store.Name}}</li>
Check out this similar answer.
And here is a working plunk.
I have a set of four cascading select boxes that are driven by JSON. Depending on nested data being available, a dropbox appears, populated or not... all working fine except the last level.. I cant see whats wrong but I'm sure its something obvious...
First of all my bindings .. I am using the "if:..." to determine if to show the next cascading / nested dropbox or not...
<select id="cboSpecies" data-bind="options: SearchCriteria.Species, optionsText: 'Name', value: Species, optionsCaption: 'Choose...'"></select>
<div data-bind="if: Species">
<select data-bind='options: Species().System, optionsText: "Name", optionsCaption: "Select...", value: System'></select>
</div>
<div data-bind="if: System">
<select data-bind='options: System().Syndrome, optionsText: "Name", optionsCaption: "Select...", optionsValue: "Name", value: Syndrome'></select>
</div>
<div data-bind="if: Syndrome">
<select data-bind='options: Syndrome().Diagnosis, optionsText: "Name", optionsCaption: "Select...", optionsValue: "Name", value: Diagnosis'></select>
</div>
Next my knockout code:
function SearchModel() {
this.SearchCriteria = "";
this.Species = ko.observable();
this.System = ko.observable();
this.Syndrome = ko.observable();
this.Diagnosis = ko.observable();
}
var model = new SearchModel();
model.SearchCriteria = json;
Finally the JSON string itself..
var json = {
"Species": [{
"ID": 3,
"Name": "Feline",
"System": []
}, {
"ID": 1,
"Name": "Ovine",
"System": []
}, {
"ID": 2,
"Name": "Canine",
"System": [{
"ID": 1,
"Name": "Cardiovascular System",
"Syndrome": [{
"ID": 1,
"Name":"Blood",
"Diagnosis":[
{
"Name": "Diag 1"},
{
"Name": "Diag 2"
}]
},
{
"ID": 2,
"Name": "Heart/Aorta",
"Diagnosis":[{"Name": "Diag 3"}
]}]
},{
"ID": 1,
"Name": "GI System /Abdomen",
"Syndrome": [
{
"ID": 1,
"Name":"Abdomen",
"Diagnosis":[]
},
{
"ID": 2,
"Name":"Abomasum",
"Diagnosis":[]
}]
}]
}]
};
Everything works fine until the last dropbox which is not getting populated...
I have a fiddle of it here:
JS FIDDLE
To test, select "Canine", then "Cardiovascular", then "Blood".
I expect the final dropbox to have data "Diag 1" and "Diag 2"
thanks.
optionsValue parameter is redundant in System selector:
<div data-bind="if: System">
<select data-bind='options: System().Syndrome, optionsText: "Name", optionsCaption: "Select...", value: Syndrome'></select>
</div>
Fixed JSFiddle DEMO
You need to get rid of optionsValue: "Name" on the Syndrome select (and there's no reason to have it on the Diagnosis select). The problem is that, if the optionsValue for Syndrome is "Name", the optionsValue is pointing to a string property of each Syndrome. That string property doesn't have a Diagnosis member. So you are then trying to bind your Diagnosis select to an undefined, which results in a Diagnosis select with no options.