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>
http://embed.plnkr.co/fsn5qakC6nKUOdQKhYjR/preview
Related
My html code is something like this and I want to select a value from dropdown and verify the same in AngularJS UnitTestCase using Jasmine
I tried using option.value but it's not working out..
<select id="company" ng-model="company" ng-change="companychange(company)" ng-options="company.ID as company.Name for company in companies"></select>
My AngularJS UnitTestCase is something like this
//somecode has been left out
$templateCache.put('selectcompany.html', directiveTemplate);
templateHtml = $templateCache.get('selectcompany.html');
formElem = angular.element('<div>' + templateHtml + '</div>');
//console.log(directiveTemplate);
$compile(formElem)($scope);
form = $scope.companyform;
companyform = form;
form2 = $compile(directiveTemplate)($scope);
$scope.$apply('companies=[{ Name: "Gold", value:0, ID: 0 },{ Name: "Silver", value:1, ID: 1 }, { Name: "Bronze", value: 2, ID: 2 }]');
}));
describe(' company ', function () {
it('selecting a dropdown ', function () {
var options = form2.find('[id="company"]')[0];
angular.element(options["value='2'"]).trigger('click');
$scope.$digest();
console.log(options.innerHTML);
expect($scope.company).toBe(2);
});
});
The following is my code:
<input required class="input form-control" type="text" ng-model="select.mySelect" list="bloodgroups" placeholder="Select Blood Group">
<datalist id="bloodgroups" >
<option ng-repeat="bloodgroup in bloodgroups"> {{bloodgroup.bloodgroups}}
</datalist>
JS
$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];
HTML
<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
Additional example:
This is in the case of retrieving data (GET) from an external source (url). Something.thisismydata is from factory.
For ng-model="select.mySelect" something like this:
$scope.showDataOnSelect = function() {
var url = "http://example.com/api";
Something.thisismydata(function(data) {
$scope.thisismydata = data;
$scope.select.mySelect = $scope.thisismydata[0].id;
}, url);
}
$scope.showDataOnSelect();
I have created a fiddle for showcasing the issue that in selects which are dependent on other selects for their values(I like to call them successive selects)
I am unable to assign an initial value to a successive select.
Like
HTML
<select ng-model="car.brand" ng-options="brand for brand in brands" ng-change="selectedBrand(car.brand)"></select>
<select ng-model="car.model" ng-options="model.name for model in cars[carIndex]"></select>
<input type="text" ng-model="car.model.capacity">
JS
$scope.brands = ['Ford', 'Honda', 'Hyundai', 'Mahindra',
'Maruti Suzuki', 'Nissan', 'Renault', 'Skoda', 'Tata', 'Toyota', 'Volksvagen'
];
$scope.selectedBrand = function(brand) {
console.log(brand);
$scope.carIndex = $scope.brands.indexOf(brand);
}
$scope.cars[0] = [{
name: "Figo",
capacity: 45
}, {
name: "Ecosport",
capacity: 52
}, {
name: "Fiesta",
capacity: 45
}, {
name: "Endeavour",
capacity: 71
}];
/*My Attempt*/
/*Successful*/
$scope.car.brand = $scope.brands[0];
/*Unsuccessful*/
$scope.car.model = $scope.cars[0][0].name;
QUESTION
How do I initialize the second select and the input box dynamically when the first select is used?
First, you should set carIndex. And car.model must be set to the type same as model in <select ng-options=".. for model in ..
$scope.carIndex=0;
$scope.car.brand = $scope.brands[0];
$scope.car.model = $scope.cars[0][0];
I need to set the option value yo id for the rendered select tag, using the following example I can set the option value as 0, 1, ,2.
Any idea what am I doing wrong here?
http://jsfiddle.net/GFF6P/1/
function ctrl($scope) {
$scope.devices = [{
name: "pc1",
id: 10
}, {
name: "pc2",
id: 20
}, {
name: "pc3",
id: 30
}];
$scope.selectedDevice = $scope.devices[0];
}
<div ng-app ng-controller="ctrl">
<select data-ng-model="selectedDevice" name="devices" data-ng-required="true" data-ng-options="device.name for device in devices"></select>
</div>
View
<select data-ng-model="selectedDevice"
name="devices"
data-ng-required="true"
data-ng-options="device.id as device.name for device in devices">
</select>
Controller
$scope.selectedDevice = $scope.devices[0].id;
Updated Fiddle
$scope.opts =
{
unit: [
{ id: 1, val: "px", name: "px"},
{ id: 2, val: "%", name: "%"}
]
}
The above is my options list array and now I set my default option.
$scope.user.unit = $scope.opts.unit[0];
The above creates the following in my html
<select class="unit ng-pristine ng-valid" data-ng-options="a.name for a in opts.unit" data-ng-model="user.unit">
<option value="0" selected="selected">px</option>
<option value="1">%</option>
</select>
When I use the below I am pulling the data that was stored in a db from the options selected in the above example.
$http.get('/assets/inc/file.php?id='+thisPage).success(function(response) {
var userData = response.userData;
var locationData = response.locationData;
$scope.user = userData;
$scope.locations = locationData;
console.log($scope.user.unit);
});
This console.logs me the following Object { id=1, val="px", name="px"}
I may be wrong but the <select> box is binded to $scope.opts
How would I be able to link the retrieved data from $scope.user.unit to $scope.opts.unit so that when the data is retrieved it will then mark the correct option as :selected?
I'm not 100% sure but you can try this (or create JSFiddle):
JS:
$http.get('/assets/inc/file.php?id='+thisPage).success(function(response) {
var userData = response.userData;
var locationData = response.locationData;
$scope.user = userData;
$scope.locations = locationData;
$scope.selected = {};
angular.forEach($scope.opts.unit, function (value)
{
if (value.val == $scope.user.unit.val) {
$scope.selected = value
}
});
console.log($scope.user.unit);
});
and in View:
<select class="unit ng-pristine ng-valid" data-ng-options="a.name for a in opts.unit" data-ng-model="user.unit">
<option value="{{selected.val}}">{{selected.name}}</option>
</select>
Your ng-model for the select element is an object, and not a primitive type, which is fine, but then you reassign $scope.user to a brand new object (returned from $http.get), so user.unit is a new object too, so it's not identical to any of your ng-options. I can think of two ways which should fix the problem:
bind the select to the 'id' property of the unit object:
<select ng-options="a.id as a.name for a in opts.unit" ng-model="user.unit.id">
or leave the select bound to user.unit, but use the track by feature of ng-options:
<select ng-options="a.name for a in opts.unit track by a.id" ng-model="user.unit">
One of the things in Angular is that you rarely need to do is explicitly create <option> elements manually as the framework will generate this for you. Therefore, the following will work: (Working jsfiddle at http://jsfiddle.net/LMHLq/12/)
HTML:
<select data-ng-model='user.unit' data-ng-options="o.id as o.name for o in opts.unit"/>
JavaScript:
$scope.opts ={
unit: [
{ id: 1, val: "px", name: "px"},
{ id: 2, val: "%", name: "%"},
{ id: 3, val: "pt", name: "pt"}
]
}
$http.get('/assets/inc/file.php?id='+thisPage).success(function(response) {
var userData = response.userData;
var locationData = response.locationData;
$scope.user = userData;
$scope.locations = locationData;
console.log($scope.user.unit);
});
$scope.opts ={
unit: [
{ id: 1, val: "px", name: "px"},
{ id: 2, val: "%", name: "%"},
{ id: 3, val: "pt", name: "pt"}
]
}
I noticed that the $scope.opts builds my select element and populates it but when the data is retrieved via db it needs to go into $scope.user.unit but this is binded to $scope.opts so what I have done is sought out the ID for the item that was retrieved and then added -1 to it so it will select from the array of $scope.opts.unit
var testUnit = $scope.user.unit.id-1; //gets the ID of the unit thats been retrieved
$scope.user.unit = $scope.opts.unit[testUnit]; //sets the selected option in the dom