I am trying to populate the currently selected item in angular js.
The currently selected item is that with the id in event.email.chases[0].id
and I am trying to match it to a select box populated from case.activeChases
This does what I want so far, which updates whenever the select box changes.
<select
class="form-control"
name="chase"
id="chase"
ng-model="customer.chase"
ng-change="addEmailToChase(customer.chase.id, event.email.id)"
ng-options="cor as cor.emails[0].subject for cor in case.activeChases">
<option value="">None</option>
</select>
I need to find the chase in activeChases with activeChases[x].id = event.email.chases[0].id, so the correct value is selected upon the page load.
Could I possibly do this all within a ng-selected attribute?
Something wrong with your model and your ng-options, the object should be the same if you want an "auto-selected"
without a jsfiddle it's hard to reproduce your situation but I tryed something like that
var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
$scope.case = {
activeChases: [{
emails: [{
subject: 'toto'
}]
}, {
emails: [{
subject: 'tata'
}]
}]
};
// set "default value"
$scope.customer = {
chase: $scope.case.activeChases[1]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="App" ng-controller="Ctrl">
<select class="form-control" name="chase" id="chase" ng-model="customer.chase" ng-change="addEmailToChase(customer.chase.id, event.email.id)" ng-options="cor as cor.emails[0].subject for cor in case.activeChases">
<option value="">None</option>
</select>
</section>
So this was my answer:
<select
class="form-control"
name="chase"
id="chase"
ng-model="event.email.chases[0].id"
ng-change="addEmailToChase(event.email.chases[0].id, event.email.id)"
ng-options="cor.id[0] as cor.emails[0].subject for cor in case.activeChases">
</select>
I wanted the default value to be event.email.chases[0].id in the select, so I just set ng-model to that, and changed the first option to cor.id[0] to use id in index.
I chose a random name for ng-model which was customer.chase which made no sense. event represents an ajax loaded form element so its safe for me to do this in my scope.
Also worth noting that the id in cor.id[0] is actually in a size one array due to incorrect design in the app.
Related
<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)"
ng-disabled="!mineSelected">
<!--<option value=""></option>-->
<option value="">Select</option>
</select>
When I add
$scope.machineSelected = "";
dynamically wherever in the controller, option in drop-down should set as "Select", but it is not updating.
Use null or undefined, not an empty string, as the "not selected" value.
That's what the docs say:
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option. See example below for demonstration.
It's not really clear that an empty string can't be used, but at least they mention null.
Set default option in controller and dynamically change based on selected item
<select ng-model="selectedItem" ng-change="getSelectedText()">
<option >All Items</option>
<option >Active Subscriptions Only</option>
<option >Expired Only</option>
</select>
Controller
app.controller('SelectedTextController', function ($scope) {
$scope.selectedItem = "All Items";
$scope.getSelectedText = function () {
var selectedItem=this.selectedItem;
};
});
Use null for the unselected value:
̶$̶s̶c̶o̶p̶e̶.̶m̶a̶c̶h̶i̶n̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶"̶"̶;̶
$scope.machineSelected = null;
The ng-options directive was re-factored with AngularJS V1.6. Before then the default could be selected with an empty string. Now the default is selected by assigning null to the model.
For more infomation, see
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-options Directive API Reference
AngularJS Developer Guide - Migrating to V1.6 - select directve
ng-options is hiding the blank value with AngularJS V1.5
The DEMO
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.machineList = [
{ _id:1, name: "Megatron" },
{ _id:2, name: "Starscream" },
{ _id:3, name: "Shockwave" },
];
$scope.machineSelected = null;
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)">
<option value="">Select</option>
</select>
<br>
machineSelected={{machineSelected}}
</body>
I have this select tag:
<select class="form-control" data-ng-model="contact.title" data-ng-options="title.title as title.title for title in titles track by title.title">
<option></option>
</select>
and when I will edit the title nothing is selected but contact.title is Mag.. Therefore Mag. should be selected. Does anyone know what I have to do in order that Mag. is selected?
From what I found tinkering around in a jsfiddle, the 'track by' was unnecessary.
Please try removing it.
<select class="form-control" data-ng-model="contact.title"
data-ng-options="title.title as title.title for title in titles">
<option></option>
</select>
Changing the 'track by' portion to $index or another value changes the selection. It's best to not use it if you are sure all titles will be unique.
Working code for me:
<select class="form-control" data-ng-model="contact" data-ng-options="title.title for title in titles track by title.title">
<option></option>
</select>
In controller:
$scope.titles = [{title: "abc"}, {title: "pqr"}, {title: "xyz"}];
$scope.contact = $scope.titles[0];
Try this.
Try this:
$scope.titles = [{title: "abc"}, {title: "pqr"}, {title: "xyz"}];
$scope.contact = {};
And:
<select name="repeatSelect" id="repeatSelect" ng-model="contact.title">
<option ng-repeat="title in titles" value="{{title.title}}">{{title.title}} </option>
</select>
Use the ng-init directive to have a default option in a select. You can use something like:
html:
<select ng-init="contact.title = titles[0]"
ng-model="contact.title"
ng-options="title.title for title in titles">
</select>
js:
$scope.titles = [{title: "Title A"}, {title: "Title B"}, {title: "Title C"}];
tl;dr
Set the initial value the model for contact in the controller, change the ng-model attribute of the select list to just contact and update the ng-options to data-ng-options="title as title.title for title in titles".
Selecting "Mag."
Does anyone know what I have to do in order that Mag. is selected?
In order to select Mag. (the first item in the list of titles, ensure that there is a property contact setup in the controller to the first element in the array of titles (i.e. $scope.contact = $scope.titles[0];). Also, change the ng-model attribute of the select from contact.title to contact.
ngOptions expression syntax
Also, review the syntax for comprehension_expression under the Arguments section of ngOptions.
The titles data sources is an array, so under array data sources, we have an expression like this format:
select as label for value in array
The value of select should not be the same as label. So update the ng-options attribute like this:
data-ng-options="title as title.title for title in titles track by title.title"
And as has already been mentioned, the track by clause is unnecessary. It would be useful if there was a different property we needed to account for (e.g. an integer named id). Thus the ng-options attribute can be simplified to:
data-ng-options="title as title.title for title in titles"
Example
See it demonstrated in the snippet below:
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.titles = [{
title: "Mag."
}, {
title: "Mag.(FH)"
}, {
title: "Mag. Dr."
}, {
title: "Dr."
}];
$scope.contact = $scope.titles[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="form-control" data-ng-model="contact" data-ng-options="title as title.title for title in titles">
</select>
<div>Contact.title: <span ng-bind="contact.title"></span></div>
</div>
Avoid ngInit
It has been suggested that ng-init be used to set the initial value, however, there is a note about this on the documentation for ngInit:
This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.1
This is because (one of) the uses of controllers is to:
Set up the initial state of the $scope object.2
Business logic like that should not be added the template.
I have this array of objects:
var abc = [
{"id":28,"name":"Actions, State & Occurences"},
{"id":29,"name":"Descriptive Words & Modifiers"}
{"id":30,"name":"Counting & Measurement"},
{"id":31,"name":"Time & Dates"}]
Here's the select I am using:
{{ row.categoryId }}
<select class="select"
convert-to-number
ng-options="option.name for option in abc track by option.id"
ng-model="row.categoryId"></select>
The problem I have is that the row.categoryId is a number and the correct value is not being selected. When I do select a value here's what my row.categoryId gets set to:
{"id":28,"name":"Actions, State & Occurences"}
Can someone tell me is there a way I can make this work correctly so that it sets and uses the id value instead of the object?
#Alan, you can use the as clause in the ng-options directive in order to tell AngularJS what you want to be set into the variable used in the ng-model directive.
Check the below example(the selected option doesn't appear maybe problem with the version it works here), here from the option object in the ctrl.abc array the id property is set (selected) into the ctrl.row.categoryId and the name property is displayed to the user.
You can find more information about ng-options here
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.abc = [
{ "id":28,"name":"Actions, State & Occurences" },
{ "id":29,"name":"Descriptive Words & Modifiers" },
{ "id":30,"name":"Counting & Measurement" },
{ "id":31,"name":"Time & Dates" }];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
{{ ctrl.row.categoryId }}
<select class="select"
convert-to-number
ng-options="option.id as option.name for option in ctrl.abc track by option.id"
ng-model="ctrl.row.categoryId">
</select>
</div>
</div>
You don't need to use track by if you will be setting the selected option in the select element using the exact same property value which you get from the ng-options directive when a user selects an option.
Check the below sample which sets a selected option using an id of the item. If you would want to set the selected option using a different property than the id property then you can use the track by clause in the ng-options directive.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.abc = [
{"id":28,"name":"Actions, State & Occurences"},
{"id":29,"name":"Descriptive Words & Modifiers"},
{"id":30,"name":"Counting & Measurement"},
{"id":31,"name":"Time & Dates"}];
setItem();
function setItem() {
vm.row = {
categoryId: 30
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
{{ctrl.row.categoryId}}
<select class="select"
convert-to-number
ng-options="option.id as option.name for option in ctrl.abc"
ng-model="ctrl.row.categoryId">
</select>
</div>
</div>
ng-options="option.id as option.name for option in abc track by option.id"
Working Plunker
Use $scope.abc instead of var abc. and replace your select tag with this
<select class="select" ng-options="option as option.name for option in abc track by option.id"
ng-model="row.categoryId"></select>
And if you need the first value to be pre-selected inside the select tag kindly assign the ng-model to first value of the array like this
$scope.row.categoryId = $scope.abc[0];
That should fix your problem
I am creating a select tag in angular. According to many sites I have read and some posts on here, it says when using the select tag to not use "ng-repeat" on the option tag but use "ng-options" on the select tag so that is how I set it up. My question is, I want a specific option tag selected by default, how do i set the selected attribute using this method?
<select class="form-control" ng-model="selected_group" ng-change="new_group($event)" ng-options="group as (group.group_name | decodeuri) for group in groups"></select>
Choosing a default is easy: set selected_group equal to a particular group in your controller.
The basic idea is that you have a collection and the selected option is to be stored in your ng-model. To designate a selection from the start, you need to put something in ng-model. That would have to be in your controller.
You could add an <option> tag:
<select class="form-control" ng-model="selected_group" ng-change="new_group(selected_group)" ng-options="group as (group.group_name | decodeuri) for group in groups">
<option value="">Please Select an Option</option>
</select>
Here I have created small working demo
<div ng-app="myApp" ng-controller="myCtrl">
<select class="form-control" ng-model="option.group" ng-options="group as (group.name | myfilter) for group in groups">
</select>
</div>
var app = angular.module('myApp', []);
app.filter('myfilter', function() {
return function(v) {
return v == 'test3' ? 'filtered test3' : v;
};
});
app.controller('myCtrl', function($scope) {
$scope.groups = [{id:1,name:'test1', phone:'1234567890'},
{id:2,name:'test2', phone:'1234567890'},
{id:3,name:'test3', phone:'1234567890'}
];
$scope.option={
group: $scope.groups[1]
}
});
I have read on many occasions that Angular tends to add an empty option at the beginning of the select element if the value of the model does not exist among the offered options.
However, I have a model whose value is set to 0 from the start, and 0 is provided as one of the options in the select element as well, yet there is still one empty option above my own options. It disappears after the actual option whose value is 0 gets selected.
Why is this and how do I get rid of it?
A very simple example of the problem I am experiencing is displayed here: http://jsfiddle.net/yuvnz7wr/
The javascript code:
var app = angular.module('Module', []);
app.controller('Test', function ($scope) {
$scope.model = 0;
$scope.options = [{
id: 0,
name: 'Zero'
}, {
id: 1,
name: 'One'
}];
});
The HTML code:
<div ng-app="Module">
<div ng-controller="Test as test">{{model}}
<select ng-model="model">
<option ng-repeat="option in options" ng-value="option.id">{{option.name}}</option>
</select>
</div>
</div>
You better use ng-options and ng-init directives for <select> with angular:
<div ng-app="Module">
<div ng-controller="Test as test">{{model}}
<select ng-model="model" ng-init="model = options[0].id" ng-options="option.id as option.name for option in options"></select>
</div>
</div>