Angular Select Tags - angularjs

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]
}
});

Related

ng-model isn't updating when selecting an option

I have a form with with option list
<form class="column-form">
<select id="classSelection" ng-change="classOptionChange()" ng-model="selectedClass" maxHeight="120">
<option selected value="">{{classOptions}}</option>
</select>
</form>
Sample class options is here
[{"id":"classR","text":" Color - Red"},{"id":"classG","text":"Color - Green"}, {"id":"classY","text":"Color - Yellow"}]
My directive is simple as I'm just trying to print out the value of my selected option. However, it's always null.
(function() {
appModule.directive('classDefault', [ '$translate', '$timeout', '$window', classService, function($translate, $timeout, $window, $document, classService) {
return {
restrict : 'E',
scope : {
.......
}
link : function(scope, element) {
scope.classOptionChange() = function() {
console.log(scope.selectedClass);
Any suggestions?
UPDATE - Thanks for all the suggestions below. Apparently, we are using this widget that supposed to render the option lists and then bind to the select tag but it is currently broken.
You need to bind the array to the select tag. One option to do so is to use the NgOptions directive.
Here's an working example
angular.module("app",[]).controller("ctrl", function($scope){
$scope.items = [{"id":"classR","text":" Color - Red"},{"id":"classG","text":"Color - Green"}, {"id":"classY","text":"Color - Yellow"}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-change="classOptionChange()"
ng-model="selectedClass"
maxHeight="120"
ng-options="item as item.text for item in items">
</select>
<h3>{{selectedClass}}</h3>
</div>
It seems like you are not properly rendering all options that have been passed down to your directive. Ideally you should loop over the classOptions collection using ng-repeat/ng-options directive and render the select tag filled option's. And then specify ng-value-"opt" on each of your option element. That will basically help you assign whole option object to selectedClass ng-model.
Template
<form class="column-form">
<select id="classSelection"
ng-change="classOptionChange()" ng-model="selectedClass"
maxHeight="120">
<option selected value="">Select option</option>
<option ng-value="opt" ng-repeat="opt in classOptions">{{opt.text}}</option>
</select>
</form>
Demo Plunker

My array of objects is not working correctly with my ng-select?

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

ng-model not selecting values from dropdown list which are generated by ng-repeat

I am using ng-repeat to generate multiple drop down. But after storing the values it is not selecting the dropdown values as previously selected. In this example it should automatically display teacher1, teacher3 and teacher5 as selected values.
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="(i,teacherList) in Trip.teachers track by $index">
{{Trip.teachers[$index].id}}
<select m-required="true" ng-model="Trip.teachers[$index].id" class="teacher form-control" >
<option value="">Select Teacher</option>
<option ng-repeat="teacher in teachers" value="{{teacher.id}}">{{teacher.name}}</option>
</select>
</div>
<button ng-click="addTeacher();">Add Teacher</button>
<button ng-click="removeTeacher();" style="display:none;" class="removeTeacher">Remove</button>
</div>
and my angular code as below:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.Trip={
teachers : [
{"name":"teacher1","id":"1"},
{"name":"teacher3","id":"3"},
{"name":"teacher5","id":"5"}
]
};
$scope.teachers=[
{id:"1","name":"teacher1"},
{id:"2","name":"teacher2"},
{id:"3","name":"teacher3"},
{id:"4","name":"teacher4"},
{id:"5","name":"teacher5"},
{id:"6","name":"teacher6"}
];
$scope.addTeacher=function(){
$scope.Trip.teachers.push({"name":"","id":""});
document.getElementsByClassName("removeTeacher")[0].style.display="block";
}
$scope.removeTeacher=function(){
$scope.Trip.teachers.pop();
if($scope.Trip.teachers.length==1){
document.getElementsByClassName("removeTeacher")[0].style.display="none";
}
}
})
Here is the link to JSFiddle:
http://jsfiddle.net/dipgupta1986/10z7mda2/10/
It seems that you want to show the default value pre-selected, you can use ng-options and ng-model for setting the default value, by rewriting select as below :
<select m-required="true" ng-model="Trip.teachers[$index]"
ng-options="option.name for option in teachers track by option.id" >
Demo
ng-Options Documentation

Why does Angular add an empty <option> if the value exist in the provided options?

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>

Angularjs ng-selected populate

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.

Resources