Develop Reference

How to add additional value to option in a drop down and how to get that value when option is selected in angular js 1.x

I have the below code in jQuery. I want to know what is the equivalent code of above in Angular Js 1.x Versions?
<select id="select">
<option value="1" data-foo="dogs">this</option>
<option value="2" data-foo="cats">that</option>
<option value="3" data-foo="gerbils">other</option>
</select>
// JavaScript using jQuery
$(function() {
$('select').change(function() {
var selected = $(this).find('option:selected');
var extra = selected.data('foo');
});
});
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

You don't need to use jQuery when you are using angularjs.
To get the selected value in dropdown, you need to model select with ng-model and then the value will be there on the fly. That's the beauty of angularjs.
Moreover, if you are interested to add options on fly, better use ng-repeat to do that. And push in the array when you need to add another option. The option will be added to select. Another piece beauty of angularjs
Here
angular.module('app',[]).controller('ctrl', function($scope){
$scope.options = [{value : 1, attr: "dogs" },{value : 2, attr: "cats" },{value : 3, attr: "gerbils" }];
$scope.data = $scope.options[0]
$scope.select = 1;
$scope.add = function(){
$scope.options.push({value : $scope.options.length + 1, attr: 'option'})
};
$scope.getFoo = function(){
$scope.data = $scope.options.find(o=> o.value == $scope.select)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<select id="select" ng-model="select" ng-change="getFoo()">
<option ng-repeat="option in options" value="{{option.value}}" data-foo="{{option.attr}}">{{option.attr}}</option>
</select>
<button ng-click="add()">Add option</button>
{{data.value}}
{{data.attr}}
</div>

Add the value to the model that is provided as the data source for ng-repeat and set ng-model for dropdown .And get value of dropdown using ng-model.

Why does select option using angularJs show first empty option?

When I reload the page, the first option is always empty. I want the option containing text Any Make to be the default select option. Here is the code for my view:
<select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-change="makeChanged()">
<option value="0" selected="selected"> Any Make</option>
<option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
</select>
here is my controller code:
.controller("homeController", function ($scope, makeData, $http) {
$scope.makeData = makeData;
$scope.makeChanged = function () {
$http({
method: "GET",
url: "homeService.asmx/GetModelById"})
.then(function (response) {
$scope.modelData = response.data;
})
}
})

just remove ng-init and in your model give default value
$scope.makeSelected = 0;
Here is a running fiddle for your code Click here
Fiddle for code with dynamic data Click here

If you aren't going to use ngOptions, at least get rid of that ng-init since it isn't a function, and in the controller function set $scope.makeSelected = 0;
Then you can remove the selected="selected" on that initial option, since the angularJS code will be handling what is selected.
See a demonstration below:
angular.module('app', [])
.value('makeData', [{
"make_id": 1,
"make_name": "cat"
},{
"make_id": 2,
"make_name": "dog"
},{
"make_id": 6,
"make_name": "monkey"
}])
.controller("homeController", function($scope, makeData, $http) {
//initialize the value associated with ng-model on the select list
$scope.makeSelected = 0;
$scope.makeData = makeData;
$scope.makeChanged = function() {
console.log('makeChanged');
//$http() request removed because we don't have access outside this domain for AJAX requests.
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="homeController">
<select class="form-control" id="make" name="make" ng-model="makeSelected" ng-change="makeChanged()">
<option value="0"> Any Make</option>
<option ng-repeat="obj in makeData" value="{{obj.make_id}}"> {{ obj.make_name | uppercase }} </option>
</select>
<div>makeSelected: {{makeSelected}}</div>
</div>

AngularJS case-insensitive binding to a dynamic select dropdown without changing the ng-bind value to lower or upper case

I am trying to perform a case-insensitive bind of an ng-model to a dynamic select drop-down using AngularJS.
by going through various other relavent answers from stack over flow, i have come up with something like below on the view , here caseinsensitive-options is an directive which i have come up with referencing the following solution
AngularJS case-insensitive binding to a static select drop-down
HTML:
<select id="dcName" caseinsensitive-options="" ng-model="DC.name" class="form-control">
<option value="">--- Please Select ---</option>
<option ng-repeat="dataCenter in inventoryDataCenters" value="{{dataCenter}}">{{dataCenter}}</option>
</select>
js directive code :
app.directive('caseinsensitiveOptions', function() {
return {
restrict: 'A',
require: ['ngModel', 'select'],
link: function(scope, el, attrs, ctrls) {
var ngModel = ctrls[0];
ngModel.$formatters.push(function(value) {
var option = [].filter.call(el.children(), function(option) {
return option.value.toUpperCase() === value.toUpperCase()
})[0];
return option ? option.value : value
});
}
}
});
The expected result is
when i pass something like this for
$scope.inventoryDataCenters = ["TEST1","test2",teST3]; and ng-model for DC.name has value TesT1.
The drop down should show TEST1 by doing case insensitive binding. That doesnt happen now. The above solution works perfect when we have static drop down.
things to be considered is that the select is inside a div which ng-repeat as shown below
ng-repeat="DC in workflowData.project_data.service_info.variables.service_data['data-center']"
and ng-model for select DC.name is derived from the above array DC.

check this URL for binding based on case insensitive value
https://jsfiddle.net/dwd2du17/6/
<div ng-app="module" ng-controller="controller as ctrl">
<select id="animal" ng-model="ctrl.animal">
<option value="">--- Select ---</option>
<option value="CaT">Cat</option>
<option value="DOg">Dog</option>
</select>
{{ctrl.animal}}
</div>
var appForm = angular.module('module', [])
.controller('controller', function($scope) {
});

Is there a way to run an angularjs function if a specific option in a select element is selected? [duplicate]

I need to call an AngularJS function from selection:
<select ng-model="selection" >
<option onselect="angular.element(this).scope().functionCall('one')">one</option>
<option onselect="angular.element(this).scope().functionCall('two')">two</option>
<option onselect="angular.element(this).scope().functionCall('three')">three</option>
<option onselect="angular.element(this).scope().functionCall('four')">four</option>
</select>
However, the function never gets called.
In the controller,
$scope.functionCall = function(value){
// do stuff with value
}
How can I call the function.

It's recommended that you use ng-change for that matter, the result may be the same as Cyril's, but the code is more readable and testable, also it is considered a better practice:
Here is a plunker demonstrating it in action:
http://plnkr.co/edit/7GgwN9gr9qPDgAUs7XVx?p=preview
app.controller('MainCtrl', function($scope) {
$scope.listOfOptions = ['One', 'Two', 'Three'];
$scope.selectedItemChanged = function(){
$scope.calculatedValue = 'You selected number ' + $scope.selectedItem;
}
});
And the HTML:
<select ng-options="option for option in listOfOptions"
ng-model="selectedItem"
ng-change="selectedItemChanged()">
</select>
Hope that helps. Thanks.

A Little bit to add on Cyril's and Fedaykin answers:
HTML code
<select ng-options="option for option in listOfOptions"
ng-model="selectedItem"
ng-change="selectedItemChanged()">
Controller Code
app.controller('MainCtrl', function($scope) {
$scope.listOfOptions = ['One', 'Two', 'Three'];
$scope.selectedItemChanged = function(){
console.log($scope.selectedItem);
}
});
You will notice that when the select option is changed, a function gets called which will give the you the value of the current selected value.

Here's what you could do :
HTML
<div ng-controller="YourController">
<select ng-model="selection" ng-options="choice for choice in choices"></select>
</div>
YourController :
$scope.choices = ["first choice", "second choice",...]
$scope.$watch('selection', function(newVal, oldVal){
switch(newVal){
case 'first choice':
[do Some Stuff]
break;
case 'second choice':
[do Some Stuff]
break;
default:
[well, do some stuff]
break;
}
}
BTW: I decided to put the options in the javascript, but what you did also works.
EDIT : ng-change VS $watch, see this question

First, onselect is not a angular keyword, It's a normal javascript keyword
You should use ng-change param in select or use like below..,
In HTML code you have to use like this.,
<select ng-model="selection" >
<option onselect="functionCall('one')">one</option>
<option onselect="functionCall('two')">two</option>
<option onselect="functionCall('three')">three</option>
<option onselect="functionCall('four')">four</option>
</select>
and in the controller
function functionCall(value){
//do stuff with value
}

Angular select display image with each option before submitting form

Update: Solved! Please see my answer below.
I am trying to display a different image with each select option in Angular. As a user clicks on each option in a menu, a different image appears next to the menu. All of this is before the form is submitted. Basically trying to do what is done here in this fiddle, but in Angular: http://jsfiddle.net/treyh/xf2pq/
html:
Current image: {{myCar.url}}
<br>
<select ng-model="myCar" class="form-control">
<option value="">Choose a car...</option>
<option ng-repeat="car in cars" value="{{car}}" data-image = "{{car.url}}">{{car.label}}</option>
</select>
in the js file, inside the controller:
$scope.cars = [
{url: 'Volvo.png', label: 'Volvo'},
{url: 'Benz.png', label: 'Benz'},
{url: 'JohnDeer.png', label: 'John Deer'},
{url: 'BMW.png', label: 'BMW'},
];

I have figured out how to do this using ng-repeat and $Scope.
in the js file, inside the controller:
$scope.cars = ['Volvo', 'Benz', 'Toyota'];
$scope.myCar = "";
var carURL = {
Volvo: 'volvo.png',
Benz: 'benz.png',
Toyota: 'toyota.png'
};
$scope.getCarURL = function(brand) {
return carURL[brand];
}
and in the html:
<select ng-model="myCar">
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>
<img ng-src="{{getCarUrl(myCar)}}">

Select inputs in Angular are a bit confusing at first, but here is one way to set it up.
angular
.module('app',[])
.controller('AppCtrl',AppCtrl);
function AppCtrl() {
var vm = this;
vm.car_image = null;
vm.cars = [
{
'url':'audi.jpg',
'name':'Audi'
},
{
'url':'bmw.jpg',
'name':'BMW'
}
]
}
<div ng-controller="AppCtrl as ctrl">
<select ng-model="ctrl.car_image" ng-options="c.url as c.name for c in ctrl.cars" class="form-control"></select>
<hr>
<img ng-src="images/{{ctrl.car_image}}" ng-show="ctrl.car_image">
</div>
Using ng-src will prevent a 404 error initially when the page loads. So when you select the option you need, the ng-model from the select input is applied to the image tag.