I have a select list created like this:
<div class="actionList" ng-repeat="selectedAction in outputDevice.selectedActions">
<select class="outputAction" ng-model="selectedAction.value" ng-options="action as action.name for action in outputDevice.userDevice.baseDevice.outputs">
<option value="">
Select Action
</option>
</select>
</div>
It is contained within a create/edit page. When the page is in edit mode, I want to chose which item in the list is selected, based on some values retrieved from the server. Currently the select list will populate with the correct options, but I can't make the select list start on the correct value. Here is the code where I populate the values on the page:
for(var i =1; i<result.length; i++){
var appyDevice = result[i];
var userDevice = appyDevice.device;
var selectedActions;
if(appyDevice.outputs){
selectedActions = appyDevice.outputs;
for(var j =0; j<selectedActions.length; j++){
selectedActions[j].value = {
name: selectedActions[j].name,
id: selectedActions[j].id
};
}
$ctrlScope.outputDevices.push({
userDevice: userDevice,
selectedActions: selectedActions
});
}
}
$ctrlScope.$apply();
I set selectedActions[j].value
, which the select list is bound to, however it does not update. Any ideas why this isn't working? Or other ways to do this?
EDIT: Here is a sample of the results JSON (ignore the redundant information and stuff, we're working on the serialization still):
[
{
"user":{
"id":1,
"username":"asdf",
"email":"asdf"
},
"id":1,
"name":"SuperAppy",
"description":"some super duper descriptioon "
},
{
"appy":{
"user":{
"id":1,
"username":"asdf",
"email":"asdf"
},
"id":1,
"name":"SuperAppy",
"description":"some super duper descriptioon "
},
"inputs":[
{
"id":1,
"name":"Shake"
}
],
"outputs":[
{
"id":1,
"name":"TurnOn"
}
],
"device":{
"user":{
"id":1,
"username":"asdf",
"email":"asdfm995@gmail.com"
},
"baseDevice":{
"inputs":[
{
"id":1,
"name":"Shake"
},
{
"id":2,
"name":"Slide"
}
],
"outputs":[
{
"id":1,
"name":"TurnOn"
},
{
"id":2,
"name":"TurnOf"
}
],
"id":1,
"name":"iPhone5",
"osVersion":5.0,
"appVersion":0.0
},
"id":1
},
"id":1
},
{
"appy":{
"user":{
"id":1,
"username":"asdf",
"email":"asdfm995@gmail.com"
},
"id":1,
"name":"SuperAppy",
"description":"some super duper descriptioon "
},
"inputs":[
{
"id":1,
"name":"Shake"
},
{
"id":2,
"name":"Slide"
}
],
"outputs":[
{
"id":2,
"name":"TurnOf"
}
],
"device":{
"user":{
"id":1,
"username":"asdf",
"email":"asdfm995@gmail.com"
},
"baseDevice":{
"inputs":[
{
"id":1,
"name":"Shake"
},
{
"id":2,
"name":"Slide"
}
],
"outputs":[
{
"id":1,
"name":"TurnOn"
},
{
"id":2,
"name":"TurnOf"
}
],
"id":3,
"name":"GalaxyS3",
"osVersion":5.0,
"appVersion":0.0
},
"id":3
},
"id":2
}
]
Edit 2:
As per the possible duplicate linked in the comments, I attempted to add an ng-init
to no avail:
<select class="inputAction" ng-model="selectedAction.value" ng-options="action as action.name for action in inputDevice.userDevice.baseDevice.inputs" ng-init="selectedAction.value=selectedAction.name">
I think this is irrelevant anyways, as I am effectively doing this initialization in the following lines of my code:
selectedActions[j].value = {
name: selectedActions[j].name,
id: selectedActions[j].id
};
I've modified mb21's fiddle to get your code working and demonstrate initializing the values.
The issue is, when you use ng-model on the select and ng-options for the options, you must set the ng-model variable to the exact reference of the object that is being used to generate that option:
for(var j =0; j<selectedActions.length; j++){
selectedActions[j].value = userDevice.baseDevice.outputs[0]; // change index to select different initial value
}