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?
Related
i have 2 select boxes,which is getting the data using ng-options and hardcoded.
the second select box should show the data based on the selected data in first selectbox. this is the plunker.
https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
can anyone please help me.
$scope.data = [{
cities: [{
id: 1,
title: 'Mysore'
}, {
id: 2,
title: 'Bangalore'
}, {
id: 3,
title: 'Delhi'
}, {
id: 4,
title: 'Mumbai'
}],
maps: [{
id: 1,
title: 'Zoo',
city_id: 1
}, {
id: 2,
title: 'Palace',
city_id: 1
}, {
id: 3,
title: 'Beach',
city_id: 4
}]
}];
You can pass the selected city's id from 1st drop down as a filter to 2nd drop down like below
<select name="mapSelect" required="true" ng-options="map as map.title for map in data[0].maps | filter:{'city_id':citySelect.selectedOption.id}" ng-model="mapSelect.selectedOption"></select>
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/
How to use ng-options.
$scope.fieldTable = [
{
filed:"text",
title:"Global"
},
{
field: "relatedentity",
title: "Entity"
},
{
field:"title",
title:"Title"
},
{
field: "content",
title: "Content"
}
]
I want to build a which use the title as displayed and when select something, popout a alert window which display the according field. The initial selection is
{
filed:"text",
title:"Global"
}
Can anyone help?
var app = angular.module('stack', []);
app.controller('MainCtrl', function($scope) {
$scope.fieldTable = [{
field: "text",
title: "Global"
}, {
field: "relatedentity",
title: "Entity"
}, {
field: "title",
title: "Title"
}, {
field: "content",
title: "Content"
}];
$scope.selected = $scope.fieldTable[0];
$scope.hasChanged = function() {
alert($scope.selected.field);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="stack" ng-controller="MainCtrl">
<select ng-options="item.title for item in fieldTable" ng-model="selected" ng-change="hasChanged()">
</select>
</body>
You can use ng-change to do that
<select ng-options="item.title as item.title for item in fieldTable track by item.title" ng-model="selected" ng-change="onChanged()">
then in your onChange() method in the controller you can do whatever you want it to do :) In your case , show an alert with the value
edit:
https://plnkr.co/edit/4csDtFVH5mKd7Xr39WtG?p=preview
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
<select data-ng-model="engineer.currentActivity" data-ng-options="a.name for a in activities">
</select>
Using the above I am able to create a select box with 3 values, a blank one and then dropdown menu and horizontal bar.
I would like to set Horizontal Bar as my default and cannot see how to do this.
Help would be great
In the controller, just add a line to setup the initial selection:
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.engineer = {}; // if needed
$scope.engineer.currentActivity = $scope.activities[1];
In your angular controller:
$scope.activities = [
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.activity = $scope.activities[1]; //Bind 2nd activity to the model.
In the HTML:
<select ng-model="activity"
ng-options="activity as activity.name for activity in activities">
<option value=""></option>
</select>
See the Fiddle
Use ng-init directive
ng-init="engineer.currentActivity = options[1]"
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]