I have the following data (provided from an Angular service, stored in the controller) I need to use to populate a drop-down, and also select the default value. When the page renders, the first dropdown option is "?" and is selected by default. The second dropdown option is "Name 1".
I've read around and tried different things, so I'm wondering if this is caused the track by being based on an id field with a different name (id vs. otherId)? Any ideas?
For the dropdown:
{"someDataSet":
[
{"id": "1", "name": "Name 1"},
{"id": "2", "name": "Name 2"}
]
}
For selecting the default value:
{"otherDataSet":
{"otherId": "1", "otherName": "Name 1"}
}
My front-end code:
<select ng-options="someData.name for someData in controller.someDataSet
track by someData.id" ng-model="controller.otherDataSet.otherId"/>
Thanks!
Check this solution: http://codepen.io/tzach/pen/LVKeGJ
Adding an option element will set the default value until your real data is loaded:
<option value="{{ controller.otherDataSet.otherId }}">{{ controller.otherDataSet.otherName }}</option>
Related
I face a strange problem where I need to show Pre selected data(which also come from server) in select option. The problem that I need to show select option based on key and value option.
<div class="list list-inset">
<span class="input-label">Permisstion</span>
<select ng-model="permisstion" >
<option ng-repeat="(key, value) in Roles" id="{{key}}" value="{{value}}">{{value}}</option>
</select>
</div>
JSON Data
"Roles": {
"21": "Admin",
"22": "Main Manager",
"23": "Branch Manager",
"26": "Side Manager"
}
I don't no how to show Pre selected data in select option and I try a lot but till now I don't get success.
Please help.
Firt, your JSON is not a array of objects. I dont know if work in a <select> by objects atributes... by my other answer you can do something like in below.
Try to use like that:
"Roles" : {
[
{code: 21, name: "Admin"},
{code: 22, name: "Main Manager"},
{code: 23, name: "Branch Manager"},
{code: 24, name: "Side Manager"}
]
}
So the atribute "code" will be my index to the select:
<select ng-options="role.name for role in Roles track by role.code">
<option value="">They see me rollin</option>
</select>
What I do was use track by role.code, as you can watch in this video.
REMEMBER: If code reapet in the array of objects it will break the <select>.
I am trying to get the selected values in a dual box.
with refference of this link http://www.virtuosoft.eu/code/bootstrap-duallistbox/
I have done something like below code snippet:
.html
<select name="duallistbox_demo1[]"
ng-model="recSchedule"
ng-options="recSchedule as recSchedule.recSchedulingName for recSchedule in recordingSchedules"
size="10"
multiple
bs-duallistbox
selected-list-label="{{ settings.selectedListLabel }}"
non-selected-list-label="{{ settings.nonSelectedListLabel }}">
</select>
json file:
[
{
"id": "1",
"recSchedulingName": "Record Schedule 1"
},
{
"id": "2",
"recSchedulingName": "Record Schedule 2"
},
{
"id": "3",
"recSchedulingName": "Record Schedule 3"
}
]
.js
console.log($('[name="duallistbox_demo1[]"]').val());
I am getting only this:
["object:326"]
I need to show the id or recSchedulingName here.
the code you have written console.log($('[name="duallistbox_demo1[]"]').val()); is a node js code. This is not compatible with angualrjS.
All data you can get from object ng-model="recSchedule". You can put this object in a foreach and see the values.
my ng-model value is - "{"Id":1,"Description":"Draft","Code":"Draft"}" and ng-options are -
[
{
"Id": 1,
"Description": "Draft",
"Code": "Draft"
},
{
"Id": 2,
"Description": "UserSubmitted",
"Code": "UserSubmitted"
},
{
"Id": 3,
"Description": "PLMApproved",
"Code": "PLMApproved"
}
]
so my dropdown is not populating(but value is binding).
I understatnd, if ng-model values is just a integer value it would bind, then how about json object?
Please help needed.
AFAIK it won't bind because your model is a different object i.e. points to a different memory location and it doesn't match with any objects inside the array.
You could use the as clause in ng-options to select a property you want to get into the ng-model and setting ng-model with that value will set the selected option.
e.g.
<select ng-options="item.Id as item.Description for item in default.items" ng-model="default.selectedItemId">
<option value="">Select</option>
</select>
else you could use the track by clause which is used when you want to get one property or object into your ng-model but you want to set the selected option with another property from the ng-model which will be specified in the track by clause i.e. update the binding from code to the view
e.g.
<select ng-options="item as item.Description for item in default.items track by item.Id" ng-model="default.selectedItem">
<option value="">Select</option>
</select>
I'm having data in the form given below
var servers = [
{
"name": "server1",
"version":
[
"10.x"
]
},
{
"name": "server2",
"version":
[
"1", "2"
]
}
]
I want to have two drop down.
First dropdown will display "name".
When user selects name from the first dropdown, second dropdown should be populated with corresponding "version".
Non-working jsfiddle link: http://jsfiddle.net/fynVy/174/
You need to tweak your HTML template, so that the first drop down is displaying the server name, and that the options for the 2nd drop down are based upon the versions in the selected drop down (ngModel of the first drop down).
<div ng-controller="MyCntrl">
<select ng-model="server" ng-options="x.name for x in servers"></select>
<select ng-model="version" ng-options="val for val in server.version"></select>
</div>
working fiddle here
Hello community been stuck on this one for a while...
Scenario:
I have a dropdownlist which I pre-populate with values fetched from a service.
Now that same object returned from the service lets me know the value that needs to be pre-selected for that dropdownlist. The service returns a JSON object with all this information.
Sample JSON Returned from service
{
"stepsInvolved": [{
"label": "Step 1",
"value": "Step 1"
}, {
"label": "Step 1",
"value": "Step 1"
}, {
"label": "Step 1",
"value": "Step 1"
}],
"valueSelected": {
"label": "Step 1",
"value": "Step 1"
}
}
Question
Using Angular I'm assigning the dropdown list values from stepsInvolved into a scope variable $scope.options thats pretty straight forward.
How do I preselect the value on the dropdownlist with the value indicated in the "valueSelected" from the JSON object? How do you accomplish this with angular?
JSFiddles and Plunkers are welcome.
P.S : Obviously this doesn't work for this scenario
$scope.options= stepsInvolved;
$scope.selectedOption = $scope.options[1];
Give value to your model in select tag
In your controller asign
$scope.selectedValue = 'Step 1'; //your selected value, assign it in any way you wish
$scope.stepsInvolved = response['stepsInvolved'];
I am assuming your object is assigned to "response"
<select ng-model='selectedValue' ng-options="item.value as item.label for item in stepsInvolved"></select>
ngSelected is the directive of choice: http://plnkr.co/edit/dGJWityhYUZd9Ht6VgSJ?p=preview