Not able to load JSON data into DropDownList in AngularJS - angularjs

I'm getting blank data while loading JSON data into Dropdown using Angular ng-options.
My JSON Values
"tagFormat": {
"displayText": "Tag Format",
"options": [{
"value": "js",
"name": "JS"
}, {
"value": "vast",
"name": "VAST"
}]
},
HTML View
<div class="select_padding">
<select class="form-control" ng-options="otf.value as otf.name for otf in details.tagFormat.options">
<option>Select Tag Format</option>
</select>
</div>
here details is my scope variable.
how to get these data and also next time I need to use selected value. so Do I need to bind with ng-model ?
Thanks

Here is the working code:
<select class="form-control" ng-options="item as item.name for item in details.tagFormat.options track by item.value" ng-model="selected">
<option value="">Select Tag Format</option>
</select>
In $scope.selected you read the selected item.
Check this example on Codepen: http://codepen.io/beaver71/pen/Vexwmr

Related

Unable to set selected value in angularjs dropdown

I am using html dropdown and binded the values from angularjs funtion, the values like below
function getStates() {
return [
{
"name": "Alabama",
"abbreviation": "AL"
},
{
"name": "Alaska",
"abbreviation": "AK"
}];
}
and my dropdown is
<select class="form-control"
ng-model="user.state" name="state"
ng-options="item.name for item in states track by item.abbreviation">
<option value="">-- choose State --</option>
</select>
In my scope variable user.state i got an abbreviation value which is preloaded by some function, based on that abbreviation value the selected value of dropdown should be shown in the html page.
valuable comments are welcome...
You need the correct ngOptions syntax value as text for item in collection
ng-options="item.abbreviation as item.name for item in states"

details on the ng-options expression

I have the below code which is used to drill down the tree structure from the model to the view in the dropdown. I am unable to understand the below expression:
ng-options="classification for (classification, configs) in filterData"
Couple of doubts here.
Why is the classification dropdown points to configs for ng-model.
How can I get the selected classificaion (system_config or network_config) in my control?
On selecting the classification from the dropdown the configs are automatically getting filtered. How to get the selected config in my controller.
Plnkr link - Plnkr
The code for the view is as below:
<div class="m-b">
<div class="form-group s-b" style="width: 150px;">
<span>classification</span>
<select class="form-control" id="classification" ng-model="configs" ng-options="classification for (classification, configs) in filterData" ng-change="handleClassification(criteria)" style="max-width:100%"> </select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Config</span>
<select id="config" ng-options="config for (config, attributes) in configs" class="form-control" ng-model="attributes" style="max-width:100%" ></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Attribute</span>
<select id="attribute" class="form-control" ng-options="attribute for attribute in attributes" ng-model="attribute" style="max-width:100%;" ng-change="handleAttrChange(attribute)"></select>
</div>
</div>
The model is as below:
{
"system_config": {
"damask": [
"umask"
],
"fsuration": [
"AUTOFSCK_DEF_CHECK"
],
"hible": [
"HIEFORMAT"
],
"linux_status": [
"SeLinuxStatus"
],
"kl_version": [
"KeelVersion"
],
"ssh_parameters": [
"Port",
"Protocol"
],
"network_parameter": [
"kernel.shmmax",
"kernel.sysrq"
],
"snmp_community": [
"rocommunity",
"trapmmunity"
],
"password_expiration_parameters": [
"PASS_MAX_DAYS",
"PASS_WARN_AGE"
]
},
"network_config": {
"interface_configuration": [
"ONBOOT"
],
"networking_configuration": [
"NETWORKING",
"NETWORKING_IPV6",
"NOZEROCONF"
],
"interface_speed": [
"InterfaceSpeed"
]
}
}
Inside my controller on submit button click:
$scope.searchParams = function(){
console.log($scope.configs);
}
Please let me know since I am using the ng-options for the first time and getting confused.
In your controller, the select value will be stored in your ng-model variable. You're using this to filter your list and set the values for the next dropdown, thus not saving the selected option.
"classification for (classification, configs) in filterData" means you're creating options for your select from the object filterData. The (classification,configs) part is a (key,value) of your objects. This means you're options will be the keys of the filterData object and the results you'll be storing in configs (which also is your ng-model) the value of the object keys. You can find more information about it here
To access the select values you could use HTML
$("#classification")[0].options[$("#classification")[0].selectedIndex].innerText;
or you can use the ng-change directive to call a function that sets the selected value. Change your ng-change to ng-change="handleClassification(configs)" instead of "criteria" and then add to your script
$scope.handleClassification = function(cfg){
$scope.myConfig = cfg;
}

ng-repeat and select/optgroup not as expected

I am having an issue with using ng-repeat and select.
Here is my code, first of all
<select>
<optgoup ng-repeat="(key, value) in Widget.ids" label="{{ value.label }}">
<option ng-repeat="id in Widget.ids[key].ids">{{ id }}</option>
</optgroup>
</select>
My data looks something like this
[
{ label: "My Label", ids: [ "one id", "another id" ] },
{ label: "My Other Label", ids: [ "one id", "another id" ] }
]
However, this returns a completely empty <select>.
What's frustrating, is if I change my HTML to look like this:
<div ng-repeat="(key, value) in Widget.ids">{{ value.label }}
<div ng-repeat="id in Widget.ids[key].ids">{{ id }}</div>
</div>
Then it lists..
My label
one id
another id
My Other Label
one id
another id
In fact if I remove the <select> tag and leave the optgroup etc tags then it will actually generate the correct DOM elements.
Also, I can't use simply use ng-model as I will be reserving that for a different model. (Widget.my.path.widget_id)
What's going on here then?
This plunker should work:
<select>
<optgroup ng-repeat="(key,value) in data" label="{{value.label}}">
<option ng-repeat="id in value.ids">{{id}}</option>
</optgroup>
</select>

angularjs pull out multiple values from select

I am a pretty new to Angularjs and am having an issue on my select
I have populated my select fields but when I want to show what has been selected from the json I can only pull out the one value. I need both the name and the type but in 2 different places in my webpage
Fiddle is http://jsfiddle.net/ktcle/9Ymvt/1455/
<div ng-controller="MyCtrl">
<select ng-options="style.name as style.name for style in styles" ng-model="style">
<option style="display:none" value="">select a style</option>
</select>
<h2>selected: {{style}}</h2>
<h3>type: {{styles.type}}</h3>
</div>
and
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.styles = [
{
name: "Red",
code: "123",
type: "t-shirt"
},
{
name: "Yellow",
code: "456",
type: "vest"
},
{
name: "Green",
code: "789",
type: "jumper"
},
];
}
Specify the entire style object as the value in your ng-options expression. And, bind ng-model to something defined outside of ng-options.
<select ng-options="style as style.name for style in styles" ng-model="selected.style">
http://jsfiddle.net/9Ymvt/1456/
Two things:
Rewrite your ng-options as "style.name for style in styles". The way you have it will display style.name and select style.name. You want to select style in stead
For type your styles variable is mistakenly pluralized. Should be: <h3>type: {{style.type}}</h3>
<div ng-controller='MyCtrl'>
<select ng-options="style.name for style in styles" ng-model="style">
<option style="display:none" value="">select a style</option>
</select>
<h2>selected: {{style}}</h2>
<h3>type: {{style.type}}</h3>
</div>
Here's your updated jsFiddle: http://jsfiddle.net/mnibecker/B2wJ4/

Angularjs: Bind complex objects with selectbox without ng-options

I need to bind complex objects via a select box.
I'm aware of ng-options, but I cannot use template expression in ng-options. I would need to add field with the displaytext to every object in my controller like in this fiddle. That would mean I would need to change logic/code for the presentation. This is a bad seperation of concerns.
Is there any way to bind complex objects with a select box not using ng-options? I need to write the displaytext declarative in the template like there:
<select name="myObject" ng-model="myObject.sub">
<option ng-selected="!myObject.sub.id"></option>
<option value="" translate="myObject.sub.self" ng-selected="myObject.sub.id == -1">
<option ng-repeat="option in subselect.data" value="{{option}}" ng-selected="option.id == myObject.sub.id">
{{option.id}} {{option.shortName}} {{ option.comment }}
</option>
</select>
currently this is binding the string [object Object], because of the interpolation in the value attribute.
Using a small helper function with ng-change you can capture the index of the selected item to obtain the full object.
HTML
<label ng-controller="CompanyController" for="ci-company_sid">
Company:
<select ng-model="selectedCompanyIndex" ng-change="update(companysData.companys)">
<option ng-repeat="c in companysData.companys" value="{{$index}}" ng-selected="c.company.sid == selectedCompany.company.sid">{{c.company.company_name}} - {{c.company.link}}</option>
</select>
<hr>
{{selectedCompany.company.link}}
</label>
Controller:
function CompanyController($scope, $http) {
$scope.companysData = {
"companys": [{
"company": {
"link": "\/company\/8256606980000143017",
"sid": "8256606980000143017",
"company_name": "Company 29"
}},
{
"company": {
"link": "\/company\/8256603960000178016",
"sid": "8256603960000178016",
"company_name": "Company 1"
}}]
}
$scope.update = function(dataSet){
$scope.selectedCompany = dataSet[$scope.selectedCompanyIndex];
}
$scope.selectedCompany = $scope.companysData.companys[0];
}
http://jsfiddle.net/XzfVZ/3/

Resources