My dropdown html looks like this:
<select name="originType" class="form-control"
ng-model="myLocationType"
ng-options="type.Key as type.Value for type in allLocationTypes"
required></select>
This works fine to populate the dropdown. However, when I'm loading the page and populating it with model data, the value that should be selected never is. The dropdown is always on the default (blank) value. I have no problem with dropdowns that are not key/value pairs. For example:
<select name="shipId" class="form-control"
ng-model="WageAgreement.ShipId"
ng-options="shipId for shipId in manufacturers"
required></select>
Populating the model value should work if the model value matches up with the supplied value in the array. See http://jsfiddle.net/5qp54/2/ where 2 is selected when set as the model value for WageAgreement.ShipId
var mod = angular.module("myApp", []);
mod.controller("MainController", function ($scope) {
$scope.allLocationTypes = [
{Key: 1, Value: "Shipyard 1"},
{Key: 2, Value: "Shipyard 2"},
{Key: 3, Value: "Shipyard 3"}
];
$scope.WageAgreement = {};
//Populate value here
$scope.WageAgreement.ShipId = 2;
});
Does your model value match the Key in your object array? I suspect something isn't matching up if it is not selecting the value on the dropdown.
If this doesn't answer your question, can you update your post with a jsfiddle or sample of how you populate manufacturers/allLocations and WageAgreement?
Related
The code below show a dropdown list from using ng-repeat. When I edit this entity, I have to make them show a certain value selected already than just showing a whole list. I know that I can put selected keyword when I want to select a certain value.
Then what if I used ng-repeat to populate a dropdown? How can I make a dropdown choose a certain value using the id?
<div ng-if="field.name=='ClienteleId'" class="input-group inputFill">
<select ng-disabled="defaultSaveButtons[$index]" class="form-control inputFill2"
ng-model="field.value" ng-options="clientele.id as clientele.name for clientele in dropdown.clienteleOptions | orderBy:'name' track by clientele.id"></select>
/div>
To set the value of a <select> in AngularJS, you need to change the variable that is set as its ng-model to one of the values in your options.
In your case, you have field.value as your ng-model, and your options use the name attribute as their label and the id attribute as their value. To have one of the items in dropdown.clienteleOptions selected by default, you need to set field.value to the id attribute of the corresponding entry in dropdown.clienteleOptions.
Imagine your options and fields look like this:
$scope.clienteleOptions = [
{id: 1, name: 'test 1'},
{id: 2, name: 'test 2'}
];
$scope.fields = [
{name: 'ClienteleId', value: null}
// ...
];
In your controller somewhere, you would have something like this to have test 2 selected:
$scope.fields[0].value = 2;
Or to make it more dynamic:
$scope.fields.forEach(function (field) {
if (field.name === 'ClienteleId') {
field.value = 2;
}
});
I'm fairly new to Angular and was wondering how I can update a dropdown after doing an insert and have the new value selected?
I tried the following:
<select class="form-control" ng-model="selectedCompany" ng-change="GetCompany()"
ng-options="company.key as company.value for company in CompanyList">
<option value="">Select a Company</option>
</select>
This populates a list of companies when the page 1st loads and the inserted data is returned to scope + it's id.
To add the new value without refreshing the page, I'm trying the following non-working (almost) code:
var key = $scope.company.id;
var value = $scope.company.name;
$scope.CompanyList.push({ key: value });
$scope.selectedCompany = $scope.company.id;
This seems to add a value to the dropdown, but it's showing up blank. It's also not selecting the blank value (which should be the new company name), any help would be appreciated.
It seems that when you create the new company object, you need to assign the value property which is the display name.
Here's a code snippet:
angular.module("myApp", [])
.controller("testCtrl", function() {
this.companyList = [{
key: 1,
value: "Company A"
}];
var ctrl = this;
this.addCompany = function() {
ctrl.companyList.push({key:2, value:"Company B"});
ctrl.selectedCompany = 2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="testCtrl as ctrl">
<select class="form-control"
ng-model="ctrl.selectedCompany"
ng-options="company.key as company.value for company in ctrl.companyList">
<option value="" disabled>Select a Company</option>
</select>
<button ng-click="ctrl.addCompany()">
Add company B and select it
</button>
</div>
Ok, so what do we have here?
You're creating your options with the ngOptions directive like this: ng-options="company.key as company.value for company in CompanyList"
That mean that the array $scope.CompanyList must have objects with a key property that will be set to the option value attribute, and a value that will be the option display value (Or label, if you prefer to call it that way).
What you were doing wrong: You added an object with only one property named key and set its value with the value variable: $scope.CompanyList.push({ key: value });
How should you fix it: You need to append object(s) with a key and a value like so: $scope.CompanyList.push({ key: key, value: value });
The following line push an object, which has a property name "key" set to value:
$scope.CompanyList.push({ key: value });
The result will be:
{'key': $scope.company.name}
You may change it to:
$scope.CompanyList.push({key: key, value: value});
Which will result in:
{ 'key': $scope.company.id, 'value': $scope.company.name }
I have the following array:
$scope.array = [{value: ['a'], name: 'A'}, {value: ['a', 'b'], name: 'A/B'}, {value: ['a', 'b', 'c'], name: 'ABC' }];
And I want to add a select to my html loading the data from the array. The point is that I want to put as a value of the option, the value of the key value but it's not selecting the default option properly.
<select class="form-control" ng-options="element as element.name for element in array track by element.value" ng-model="form.element"></select>
The object that I use for the ng-model looks like this when I initiate the application:
$scope.form = {element: ['a'], otherField: 'test'}
So it should select the first element of the array as default value but it's not working.
You can find the fiddle here: Fiddle
The option box needs to contain the item that you are attempting to select. Since you are putting reference objects into the option box, then your your option box must contain an item with the same reference as the item you wish to have selected by default.
I have updated the JS in fiddle
Here is the new JS
function Controller($scope) {
$scope.array = [{value: ['a'], name: 'A'}, {value: ['a', 'b'], name: 'A/B'}, {value: ['a', 'b', 'c'], name: 'ABC' }];
$scope.form = {element: $scope.array[0]}
}
when you use ng-options directive the object will have the prototype of your selected object with (in your case) an attribute value and an attributes name
In your sample something like :{value: ['a'], name: 'A'}
So the first thing to do is to set your ng-model with an object with this shape to be abble to choose a default value :
$scope.form = {element: {value: ['a'], name: 'A'}}
Then it's your track by syntax in your ng-options that will define the default value of your select.
you can't use the attribute value in your sample because it's an array and ng-options don't know how to compare array. ng-options can define default value by : id, number or string.
What i advice you it's to use a property like the name (or create an id if you prefer) like that the ng-options will be abble to determine the default value
<select class="form-control" ng-options="element as element.name for element in array track by element.name" ng-model="form.element"></select>
With this only two change your default selection will run
I have a array of object { id:x, name: 's' } and using ng-options to create drop down with default selected data. This is working fine so far.
Now when I select one of the option and see the selected data, it return complete object but i need only name field as well as default value must be selected on load.
// in controller
vm.teams = [
{
id: 1,
name:'First'
},
{
id: 2,
name:'Second'
},
{
id: 3,
name:'Third'
}
];
vm.teamFormData = {
team: ''
};
vm.getTeam = function(formData) {
$log.debug(formData); << here I get object
}
// in View
<select ng-init="vm.teamFormData.team = vm.teams[0]"
ng-model="vm.teamFormData.team"
ng-options="t.name for t in vm.teams track by t.id" >
</select>
Here is my working plunker
Your ngOptions syntax is slightly off - it's value as text for item in array
ng-options="t.name as t.name for t in vm.teams track by t.id"
And your ngInit then becomes
ng-init="vm.teamFormData.team = vm.teams[0].name"
Side note - you probably don't want ngInit - there's no real use case in your above example for it. Instead, just set the property in the controller.
See plunkr: https://plnkr.co/edit/7SGIdtfjucMnMqiEa7JY?p=preview
I have a array opts with the different options for a <select> element. Array's objects have a property text for display and a property value for get the value and set in a variable $scope.opt2.
Controller:
function MyCtrl($scope) {
$scope.opts = [
{value: 10, text: '1st' },
{value: 20, text: '2nd' }
];
}
I want set:
$scope.opt2 = {ref: 10} and show 1st when the first option is selected
$scope.opt2 = {ref: 20} and show 2nd when the second option is selected
I tried:
<select ng-model="opt2" ng-options="{ref: obj.value} as obj.text for obj in opts">
The value sets correctly but the text is not show. Any solution?
Examples for testing: http://codepen.io/ces/pen/azbLzX
While Philipps response will work, it's a little more complicated then you need it to be, change your select to this:
<select ng-model="opt2.ref" ng-options="obj.value as obj.text for obj in opts">
See the edited codepen here: http://codepen.io/anon/pen/XJWeVQ