Develop Reference

Vue.js: setting html <option> tag to default via "selected" doesn't work

I want to set one of the available <option> tags to default. On the <select> tag I am using v-model and I know that the vue.js documentation states the following in regard to this:
v-model will ignore the ... selected attributes found on any form
elements. It will always treat the Vue instance data as the source of
truth. You should declare the initial value on the JavaScript side,
inside the data option of your component.
So I am using the selected attribute with v-bind and passing either directly true to it or through a variable in the data option. Unfortunately it doesn't work. Here is an jsfiddle.
And here is the example code:
HTML
<div id="app">
<select v-model="selectedData" #change="doSomething">
<option :selected="true" value="">
Please select account
</option>
<option
v-for="data in myData"
:key="data.id"
:value="data.val"
>
{{ data.val }}
</option>
</select>
{{ selectedData }}
</div>
JavaScript
new Vue({
el: "#app",
data: {
selected: true,
selectedData: null,
myData: [
{ id: 1, val: "abc" },
{ id: 2, val: "def" },
{ id: 3, val: "ghi" },
{ id: 4, val: "jkl" },
]
},
methods: {
doSomething: function(){
console.log('hello')
}
}
})

The <select> tag's model is what is actually driving the chosen item in the drop down.
<select v-model="selectedData" #change="doSomething">
Change your "default" option to the following
<option value="-1">
Please select account
</option>
and in your data object, instead of having null assigned to your selected value on initialization, set it to -1
data: {
selectedData: -1,
myData: [
{ id: 1, val: "abc" },
{ id: 2, val: "def" },
{ id: 3, val: "ghi" },
{ id: 4, val: "jkl" },
]
},

You'll want to set the initial value of the property bound with v-model, so selectedData: '' (instead of null). I'm not sure if I'm missing something else, but this is how I always do it.

ng-model returns name of value in place of real value

I have html page using angular.
I have a table with ng-repeat on array:
<tr ng-repeat="oblig in Obligations">
oblig object contains property of chargeOptionId connected to another array ChargeOptions.
Inside the table there is a select element that I want to show details of charge option of oblig.
html code:
<select class="form-control full-width" ng-model="oblig.ChargeOptionId">
<option ng-selected="ch.Id == oblig.ChargeOptionId" value="ch.Id" ng-repeat="ch in ChargeOptions">{{ch.Account}}</option>
</select>
the select element display the charge option details as I want, but when I try saving oblig, oblig.ChargeOptionId="ch.Id" string in place of value of ch.Id.
I tried:
1) using ng-value, but the select did not display the data correctly.
2) ng-options, but still data was not displayed correctly.
how can I fix that problem?

Change
value="ch.Id"
to
value="{{ch.Id}}"
or
ng-value="ch.Id"
The attribute "value" is not an angular directive (like ng-model and ng-value are) so it doesn't know you intend "ch.Id" as a variable.
jsbin

I'm not sure what was failing before, but this seems to work: I used ng-options instead of ng-repeat.
This seemed to do the trick:
angular.module('app', []).controller('Ctrl', function($scope) {
$scope.Obligations = [
{ ChargeOptionId: 1 },
{ ChargeOptionId: 2 },
{ ChargeOptionId: 3 },
{ ChargeOptionId: 4 },
{ ChargeOptionId: 5 },
{ ChargeOptionId: 6 },
{ ChargeOptionId: 7 }
];
$scope.ChargeOptions = [
{ Id: 1, Account: 'Account 1' },
{ Id: 2, Account: 'Account 2' },
{ Id: 3, Account: 'Account 3' },
{ Id: 4, Account: 'Account 4' },
{ Id: 5, Account: 'Account 5' },
{ Id: 6, Account: 'Account 6' },
{ Id: 7, Account: 'Account 7' }
];
$scope.alertSelected = function(idx) {
alert($scope.Obligations[idx].ChargeOptionId);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div ng-repeat="oblig in Obligations">
<div>
ChargeOption.Id = {{ChargeOptions[$index].Id}} /
Obligation.ChargeOptionId = {{oblig.ChargeOptionId}}
</div>
<select class="form-control full-width"
ng-model="oblig.ChargeOptionId"
ng-options="ch.Id as ch.Account for ch in ChargeOptions">
</select>
<button ng-click="alertSelected($index)">Selected value?</button>
<br /><br />
</div>
</div>

AngularJS: Call function after user makes selection in dropdown

so I have a dropdown and added some values as shown below.
I want the program to do stuff based on the selected options from drop box.
angular.module('priceCalculator', [])
.controller("mainCtrl", ['$scope', function($scope) {
$scope.data = {
availableOptions: [
{id: 0, name: 'Please Select'},
{id: 1, name: 'PVC Red Extra'},
{id: 2, name: 'Alu Standard'},
{id: 3, name: 'SKS Classic Decor'},
{id: 4, name: 'SKS Aluminiu Alb'}
],
selectedOption: {id: 0, name: 'Please Select'}
};
}]);
I was thinking I could do it with a switch statement
$scope.doStuff = function() {
switch(id from availableOptions) {
case 0:
// do stuff, I want to read file based on inputs I shall also get from user
break;
default:
// do stuff
};
};
How do I need to do this? Sorry if it's easy for everybody, I'm really noob at coding
Here's the html section
<label>Select Shutter Type</label>
<!-- Use ngOption to select shutter type -->
<select ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption">
</select>

If i understand correctly, you would like your doStuff function to be called when the selection changes. You can use ng-change to do that:
<select
ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.selectedOption"
ng-change="doStuff(option)">
Then you can declare doStuff like this:
$scope.doStuff = function(selectedOption) {

Angularjs Dropdown OnChange Selected Text and Value

I am new to AngularJS and trying to get Selected Text and Value from Dropdown. I followed a lot of tutorials with still unable to get there. SelectedValue and SelectedText are always undefined. Below is my code:
Html:
<div ng-app="SelectApp">
<div ng-controller="selectController">
<select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)">
<option value="0">Select a category...</option>
<option ng-repeat="category in categories" value="{{category.id}}"
ng-disabled="category.disabled" ng-class="{'mainCategory' : category.disabled}">
{{category.name}}
</option>
</select>
</div>
Js:
'use strict';
var app = angular.module('SelectApp', [ ]);
app.controller('selectController', ['$scope', '$window', function ($scope, $window) {
$scope.categories = [
{ id: 1, name: "- Vehicles -", disabled: true },
{ id: 2, name: "Cars" },
{ id: 3, name: "Commercial vehicles", disabled: false },
{ id: 4, name: "Motorcycles", disabled: false },
{ id: 5, name: "Car & Motorcycle Equipment", disabled: false },
{ id: 6, name: "Boats", disabled: false },
{ id: 7, name: "Other Vehicles", disabled: false },
{ id: 8, name: "- House and Children -", disabled: true },
{ id: 9, name: "Appliances", disabled: false },
{ id: 10, name: "Inside", disabled: false },
{ id: 11, name: "Games and Clothing", disabled: false },
{ id: 12, name: "Garden", disabled: false }
];
$scope.onCategoryChange = function () {
$window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name);
};
}]);
And one more thing, I have defined my first item as Select a category... then Why first item in Dropdown is always empty.
Below is my fiddle sample.
http://jsfiddle.net/Qgmz7/136/

That's because, your model itemSelected captures the current value of your select drop down which is nothing but the value attribute of your option element. You have
<option ng-repeat="category in categories" value="{{category.id}}">
in your code, so in the rendered version, you'll get
<option ng-repeat="category in categories" value="0">
but you're expecting itemSelected to be your category object and any attempt to query id or other property will return undefined.
You can use ng-options with group by with little bit of change to your data or you can use normal ng-repeat, get the selectedIndex and lookup the category object from your categories list using that index. Showcasing the first approach here.
HTML
<select name="category-group" id="categoryGroup"
ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name group by category.group for category in categories">
</select>
Updated Data
$scope.categories = [
{ id: 0, name: "Select a category..."},
{ id: 1, name: "Cars", group : "- Vehicles -" },
{ id: 2, name: "Commercial vehicles", group : "- Vehicles -" },
{ id: 3, name: "Motorcycles", group : "- Vehicles -" }
];
$scope.itemSelected = $scope.categories[0];
Instead of disabled property, you can add a group property which can be used in group by.
Here' an updated Fiddle to illustrate the idea.

You should use ng-options to set object to your ng-model value on change of you select options.
Markup
<select name="category-group" id="categoryGroup" class="form-control"
ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name for category in categories">
<option value="0">Select a category...</option>
</select>
Fiddle Here
Update
For persisting style you have to use ng-repeat there, in that case you will only have id binded to your ng-model and while retrieving whole object you need to filter your data.
$scope.onCategoryChange = function () {
var currentSelected = $filter('filter')($scope.categories, {id: $scope.itemSelected})[0]
$window.alert("Selected Value: " + currentSelected.id + "\nSelected Text: " + currentSelected.name);
};
Updated Fiddle

<div ng-app="SelectApp">
<div ng-controller="selectController">
<select ng-change='onCategoryChange()' ng-model="itemSelected" ng-options="category.name for category in categories">
<option value="">-- category --</option>
</select>
</div>
//http://jsbin.com/zajipe/edit?html,js,output

A little change in your onCategoryChange() should work:
$scope.onCategoryChange = function () {
$window.alert("Selected Value: " + $scope.categories[$scope.itemSelected - 1].id + "\nSelected Text: " + $scope.categories[$scope.itemSelected -1].name);
};
JSFiddle: http://jsfiddle.net/Qgmz7/144/

ngChange only returns the value of your selected option and that's why you don't get the whole data.
Here's a working solution without changing your markup logic.
Markup:
<select
name="category-group"
id="categoryGroup"
class="form-control"
ng-model="id"
ng-change="onCategoryChange(id)">
ngChange handler:
$scope.onCategoryChange = function (id) {
//get selected item data from categories
var selectedIndex = $scope.categories.map(function(obj) { return obj.id; }).indexOf( parseInt(id) );
var itemSelected = $scope.categories[selectedIndex];
$window.alert("Selected Value: " + itemSelected.id + "\nSelected Text: " + itemSelected.name);
};
Another solution (little bit dirty) would be to change only the value of your options into something like this:
<option .... value="{{category.id}}|{{category.name}}">
...and inside your actual ngChange handler, just split the value to get all the values as an array:
$scope.onCategoryChange = function (itemSelected) {
$scope.itemSelected = itemSelected.split('|'); //string value to array
$window.alert("Selected Value: " + $scope.itemSelected[0] + "\nSelected Text: " + $scope.itemSelected[1]);
};

Here very Simple and easy code What I did
<div ng-app="myApp" ng-controller="myCtrl">
Select Person:
<select ng-model="selectedData">
<option ng-repeat="person in persons" value={{person.age}}>
{{person.name}}
</option>
</select>
<div ng-bind="selectedData">AGE:</DIV>
<br>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',myCtrlFn);
function myCtrlFn($scope) {
$scope.persons =[
{'name': 'Prabu','age': 20},
{'name': 'Ram','age': 24},
{'name': 'S','age': 14},
{'name': 'P','age': 15}
];
}
</script>

ngOptions two level object display

I have this structure:
model = [
{
name: 'name1',
items: [
{
name: 'subobj1'
},
{
name: 'subobj2'
}]
},
{
name: 'name2',
items: [
{
name: 'subobj1'
},
{
name: 'subobj2'
}]
},
....
]
Question is: How do I write ngOptions attrbiute to output this object like this?:
<select>
<optgroup label="name1">
<label>subobj1</label>
<label>subobj2></label>
</optgroup>
....
</group>
Also - ngRepeat is not an option. I have to do this ngOptions alone for plugin being used to work.

ngOptions doesn't support multi-dimensional arrays. You must flatten your array first.
Read more in this answer.
I used a filter:
app.filter('flatten' , function(){
return function(array){
return array.reduce(function(flatten, group){
group.items.forEach(function(item){
flatten.push({ group: group.name , name: item.name})
})
return flatten;
},[]);
}
})
And the markup:
<select ng-model="select"
ng-options="item.name
group by item.group
for item in model | flatten"></select>

<select>
<option ng-repeat-start="m in model" ng-bind="m.name"></option>
<option ng-repeat-end ng-repeat="item in m.items" ng-bind="item.name"></option>
</select>
You might add something like style="font-weight: bold;" on the first option (which is the group label, by the way) and something like style="padding-left: 15px;" on the second option line, which is another repeat for all the first option line.
So basically by doing this you just add 2 levels (without optgroup tag, mind you) to your select.