I am using Angular to build a SELECT using ng-options, and all is working minus the fact I would like to set the value rather than having Angular auto-populate that.
$scope.form.stage = [{
optional: 1
id: 23
description: UD Visual Inspection - optional
},{
optional: 0
id: 12
description: Flash
}]
My directive:
<select name='test_stage' ng-model='form.selectedStage' ng-change='abc(form)' ng-options='item.description for item in form.stage'>
Rendered HTML:
<select name="test_stage" id="test_form_stage" tabindex="2" ng-model="form.selectedStage" ng-change="abc(form)" ng-options="item.description for item in form.stage" ng-blur="fetchTestStation(form)" class="ng-valid ng-dirty"><option value="0">UD Visual Inspection - optional</option><option value="1">Flash</option></select>
Instead of having the values be set to 0 and 1 I want 23 and 12...
Update Rendered HTML:
<select name="test_stage" id="test_form_stage" tabindex="2" ng-model="form.selectedStage" ng-change="abc(form)" ng-options="item.id as item.description for item in form.stage" ng-blur="fetchTestStation(form)" class="ng-valid ng-dirty"><option value="0">UD Visual Inspection - optional</option><option value="1">Flash</option></select>
Updated: 7-25-15
form: {
selectedStage: null
stage:
[{
optional: 1
id: 23
description: UD Visual Inspection - optional
},{
optional: 0
id: 13
description: Engraving
}]
}
selectedStage: {
$ref: $["form"]["stage"][1]
}
Generated HTML
<select name="test_stage" id="test_form_stage" tabindex="2" ng-model="form.selectedStage" ng-options="item as item.description for item in form.form.stage" ng-blur="fetchTestStation(form)" class="ng-valid ng-dirty"><option value="?"></option><option value="0">UD Visual Inspection - optional</option><option value="1">Engraving</option></select>
My Controller $scope.fetchTestRecord = function($scope){
// Set vars
$scope.workorder = {};
$scope.product = {};
// Set params to send in request
var params = $.param({
serial: $scope.serial
});
/**
* Get stage data for serial from API [Factory]
*/
tstFrmServices.locateRecord(params).success(function (result) {
$scope.data = result.data;
// Handle successfull response
if ($scope.data['success'][0].code == 200){
$scope.form = {
selectedStage: null,
stage: $scope.data['success'][0].data
};
$scope.workorder = $scope.data['success'][0].wo;
$scope.product = $scope.data['success'][0].product;
}
}).error(function (result) {
});
};
});
Data returned from Factory
"data": [{"optional": 1, "id": 23, "description": "UD Visual Inspection - optional"}, {"optional": 0, "id": 13, "description": "Engraving"}], "product": "10P91685-010"}]}
If you let selectedStage be the entire selected object, you can get the value you want from form.selectedStage.id
<select name='test_stage'
ng-model='form.selectedStage'
ng-change='abc(form)'
ng-options='item as item.description for item in form.stage'>
</select>