I have created a select box in two different ways with AngularJS. One with static options in the HTML and ng-model and one with ng-options.
Both populate the select box, however, when a value comes back from the REST API the select box stays blank.
The docs suggest tracking by id.
<select id="delimiter" name="delimiter" ng-model="config.delimiter"
ng-options="option.name for option in data.availableOptions track by option.id">
</select>
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
};
//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;
The data that comes from the server contains the numbers i.e. the ids.
The config option is supposed to have the delimiter set on it and then the select box is supposed to select the correct item, but it doesn't.
However, a simple example like this DOES work at selecting the correct item so it must be something with the binding after the REST call.
<body ng-app ng-controller="AppCtrl">
<div>
<label>Delimiter</label>
<select ng-model="mydelimiter">
<option value="44">Comma</option>
<option value="9">Tab</option>
<option value="32">Space</option>
<option value="124">Pipe</option>
<option value="59">Semi-Colon</option>
<option value="58">Colon</option>
</select>
</div>
</body>
function AppCtrl($scope) {
$scope.mydelimiter = '59';
}
I'm not sure if this is exactly what you were looking for but if you'er just trying to set a specific default value, set the model to the selectedOption
$scope.config = {};
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'}
};
$scope.config.delimiter = $scope.data.selectedOption;
Or you could set it directly from the array:
$scope.config.delimiter = $scope.data.availableOptions[0];
Here's a fiddle with a working example:
http://jsfiddle.net/pkobjf3u/1/
Related
$scope.accounts = [
{id: 1, name: 'Tommy',status:'premium'},
{id: 2, name: 'Alexander',status:'free'},
{id: 3, name: 'Lorem',status:'banned'},
{id: 4, name: 'Ipsum',status:'premium'}
{id: 5, name: 'Dot sit',status:'Y'}
];
How can I adjust dynamically to the situation in this json output?
for example, multiple data in groupby
<select>
<option>premium</option>
<option>free</option>
<option>banned</option>
<option>y</option>
</select>
(My English is bad )
<select ng-options="item as item.status for item in (accounts | unique: 'status')"></select>
You need to include the filter from https://github.com/angular-ui/angular-ui-OLDREPO/tree/master/modules/filters/unique
Does anyone know why AngularJS not selecting options on <select multiple> if ng-model is an array of integer?
$scope.selected = [1, 3]
$scope.options = [
{id: 1, title: 'option 1'},
{id: 2, title: 'option 2'},
{id: 3, title: 'option 3'}
]
Everything works just fine if $scope.selected = ['1', '3'] is array of string. I need to get it working without using ng-options.
Here is JSFiddle:
http://jsfiddle.net/maxflex/3jfk8/19/
I have angular form and I am using md-select and md-option. But when I click on dropdown, freezes the screen and if I see by inspecting element md-option will be showing.
<md-select ng-model="Severities" placeholder="Select a Severity">
<md-select-label>{{ Severities.name }}</md-select-label>
<md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
{{ opt.name }}
</md-option>
</md-select>
$scope.severities= {
availableOptions: [
{
id: '1',
name: 'name1'
},
{
id: '2',
name: 'name2'
},
{
id: '3',
name: 'name3'
}
], };
$scope.severities= {
availableOptions: [
{id: '1', name: 'name1' },
{ id: '2', name: 'name2' },
{ id: '3', name: 'name3' }
]};
In your model $scope.severities.name is nothing and in md-select-label you are using this which is wrong.
Try this -
<md-select ng-model="Severities" placeholder="Select a Severity">
<md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
{{ opt.name }}
</md-option>
</md-select>
Try this i prefer using ng-option instead of ng-repeat
<md-select ng-model="Severities" placeholder="Select a Severity" ng-option="opt as opt for opt in severities.availableOptions">
<ng-option ng-selected="true">Select Option</ng-option>
</md-select>
I had the same issue while generating values from an Array and to use it in ng-options. According to what I have read, ng-options could be used sometimes via ng-repeat. The alternate which You can use is as follows:
<md-select ng-model="Severities" id="Severities"><ng-options ng-repeat="opt in severities.availableOptions" ng-value="{{opt.name}}">{{opt.name}}></ng-options></md-select>
The controller code would be as
$scope.severities= {
availableOptions: [
{id: '1', name: 'name1' },
{ id: '2', name: 'name2' },
{ id: '3', name: 'name3' }
]};
but I have used JavaScript to fetch the values selected in ng-options.
var severity = document.getElementById("Severities").value;
later process the severity value present in variable severity.
js:
$scope.tasks = [{ Name: "Deliverable", Id: "Deliverable" },
{ Name: "Email", Id: "Email" }]
$scope.currentTask = {Subject: "Deliverable"}
html:
<select ng-model="currentTask.Subject" ng-options="task.Id as task.Name for task in tasks"></select>
result:
No option is selected when page load. But the dropdown works well. Am I missing anything?
I am trying to show a select box inside a ng-repeat and am stuck with the following:
<tr ng-repeat="element in elements" post-repeat-directive>
<td>{{element.name}}</td>
<td>
<select ng-model="element.type"
ng-options="item.id as item.name for item in tipo_items"></select>
</select>
</td>
</tr>
In my controller I have:
$scope.tipo_items = [
{ id: 1, name: 'uno' },
{ id: 2, name: 'dos' },
{ id: 3, name: 'tres' },
{ id: 4, name: 'cuatro' },
{ id: 5, name: 'cinco' },
];
This shows the select items, but no item is pre-selected!
I checked the element.type values and they are correct...
What am I doing wrong?
According to the comprehension expression you defined in the select, you need to use the id value to preselect the item and set it for the model object.
$scope.element = {};
$scope.element.type = $scope.tipo_items[0].id;
DEMO
OK I found the problem...
I was loading the id from the database as json, and the id was a string, not an integer...
this solved the problem:
$scope.tipo_items = [
{ id: '1', name: 'uno' },
...
instead of
$scope.tipo_items = [
{ id: 1, name: 'uno' },
...
This is default behavior by angular select directive. If you'll set ng-model to a default in the ctrl you'll get it preselected.
something like (in the ctrl):
$scope.element.name = $scope.tipo_items[0]