This works in perfect javascript
document.getElementById("mySelect").selectedIndex = "0"
<select class="selectpicker" id="mySelect">
<option>English </option>
<option>Español </option>
</select>
How do you do this same but in Angularjs
app.controller("BodyController",function($scope){
/****************codeeeeeeeeeeeeeeeeeeeeeeeeee*/
});
One way is to add the ng-model attribute to the select tag, and then set the value of the matching variable in the scope (corresponding to the scope set in the controller). See the example below - bear in mind that value attribute were added to the options. And like tymeJV mentioned, ngOptions would typically be used in an angular application to set the option nodes inside the select tag (see the second example below).
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = 'en';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang">
<option value="en">English </option>
<option value="es">Español </option>
</select>
</div>
Using ngOptions:
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = {name: 'English', id: 'en'};
$scope.langs = [
{name: 'English', id: 'en'},
{name: 'Español', id: 'es'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang" ng-options="lang.name for lang in langs track by lang.id">
</select>
</div>
Related
I have a select tag in html which has a value from angularjs. Everytime I select a value, the select tag will be empty. Why? How to fix it?
$scope.getAll = function(){
$http.post()....
$scope.places = response.data;
};
$scope.getAll();
$scope.sample = function(str){
alert(str);
};
HTML
<select ng-model="val" ng-change="sample(val)">
<option ng-repeat="place in places" value="place.name">{{place.name}}</option>
</select>
In code above, when I select some value of the select tag it alerts me the value but the select tag goes empty!
i recommend instead of using ng-repeat use ng-options
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.places = [ {name: 'California'},
{name: 'New York'},
{name: 'Cochin'}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="val" ng-change="sample(val)" ng-options="place.name as place.name for place in places">
</select>
{{val}}
</div>
When setting the value of the option as an expression, try using ng-value .
While your question is confusing, I'm guessing that the alert shows up as place.name
<select ng-model="val" ng-change="sample(val)">
<option ng-repeat="place in places" ng-value="place.name">{{place.name}}</option>
</select>
Or if you want to set the value of the select attribute itself, you can use,
<select ng-model="val" ng-change="sample(val)">
<option ng-repeat="place in places" value="{{place.name}}">{{place.name}}</option>
</select>
https://plnkr.co/edit/fAbqV1wG2VuF069lt3bm?p=preview
This might be able to guide you further.
I can't get a placeholder idea with select. With the below the first entry is still blank.
<select class="form-control" ng-model="refData" required>
<option ng-repeat="d in refData">
{{d.value}}
</option>
<option value="" disabled hidden selected>View current values</option>
</select>
You can use transclusion to add an extra option that is disabled and selected. See How do I make a placeholder for a 'select' box? for more background on that general solution. Here is the ngSelect documentation for reference, as well.
View
<div ng-controller="MyCtrl">
<select name="mySelect"
id="mySelect"
ng-options="option.name for option in refData track by option.id"
ng-model="selectedOption">
<option value="" disabled selected>View current values</option>
</select>
</div>
AngularJS application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.refData = [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
];
$scope.selectedOption = "";
});
JsFiddle Demo
<select ng-model="testData" ng-options="test.name for test in testData">
<option value="" selected>View current values</option>
</select>
Given test data is:
$scope.testData = [{"name" : "John"}, {"name" : "Micheal"}, {"name" : "Sarah"}];
I suggest using ng-options
<select ng-options="d as d.value for d in refData" ng-model="refDataSelected"></select>
On your controller you can declare
$scope.refDataSelected = refData[0]
to use first element as default option
If you want to create a dummy text you can add a new object to refData with custom text and give it an unreal id like -1. But when you submit you should check whether its id is -1 or not.
In my code I use ng-options to bind data to select tag,also I set the multiple property to true.
<select ng-if="exp.metaData.elementType =='in'"
multiple=""
ng-multiple="true"
class="form-control"
ng-model="exp.value"
ng-options="value.id as value.title for value in exp.dataSource">
<option value=""> Select ...</option>
</select>
But in run time in browser, the select tag does not support multiple,also I do not see multiple="" or ng-multiple="true" when I Inspect the select element. (f12->Elements)
Below is the minimal setup example for multiple select in angular.
Not sure why you would need a Please select option in multiple select, though.
angular.module('test', []).controller('Test', Test);
function Test() {
var vm = this;
vm.options = [
{name: 'aaa', value: '1'},
{name: 'bbb', value: '2'},
{name: 'ccc', value: '3'}
];
vm.selected = [];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='test' ng-controller='Test as test'>
<select multiple ng-options="option.value as option.name for option in test.options" ng-model="test.selected">
</select>
<div>{{test.selected}}</div>
</div>
In Angular, how do you display the content/text of an option in a select list? For example, you have {{ data.singleSelect }} that displays the value of an option, but how do you use it to display the content/text of that option instead?
Code on Plunker - http://plnkr.co/edit/cCAHfWL275EZTZt9epUR?p=preview :
<body ng-app="staticSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" ng-model="data.singleSelect">
<option value="option-1">Thing 1</option>
<option value="option-2">Thing 2</option>
</select><br>
<tt>singleSelect = {{data.singleSelect}}</tt>
<p>Update above so 'Thing 1' or 'Thing 2' displayed instead of 'option-1' or 'option-2'</p>
</form>
</div>
</body>
I want to keep the markup of options in in the HTML. (If this against Angular best practices, please let me know). And want to keep values on the option so they can be used as filters.
In controller
$scope.options = [
{
name: "Thing 1",
value: "option-1"
},
{
name: "Thing 2",
value: "option-2"
}
];
HTML
<select ng-model="data.singleSelect" ng-options="option as option.name for option in options"/>
Your value
{{data.singleSelect.name}}
Inside your controller
$scope.allData = {
'option-1': 'Thing 1',
'option-2': 'Thing 2'
}
inside your HTML
<tt>singleSelect = {{allData[data.singleSelect]}}</tt>
You can just omit the value attribute of option tag.
<body ng-app="staticSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" ng-model="data.singleSelect">
<option>Thing 1</option>
<option>Thing 2</option>
</select><br>
<tt>singleSelect = {{data.singleSelect}}</tt>
<p>Update above so 'Thing 1' or 'Thing 2' displayed instead of 'option-1' or 'option-2'</p>
</form>
</div>
</body>
Yet another variant: dynamically create select like this:
<select name="singleSelect" ng-init="ops=[{v:'option-1', l:'thing 1'},{v:'option-2', l:'thing 2'}]" ng-options="o.l for o in ops" ng-model="data.singleSelect">
</select>
Plunkr
You could use ng options in an angular js way.
Here is the plunker
http://plnkr.co/edit/pGqzwhvkOO0iXYvmdlOj?p=preview
I have a <select> that is controlled using both ng-model and ng-options:
<select ng-model="user.option"
ng-options="value.label for (key, value) in data.options">
<option value="">Select value</option>
</select>
The options are grouped in an object:
$scope.data.options = {
one: { label: 'one' },
two: { label: 'two' }
};
At some point, I want to change the selected option from the controller. This works:
$scope.user.option = $scope.data.options['two'];
However, in my context, I maintain a variable master, and use it to set $scope.user:
$scope.master.option = $scope.data.options['two'];
$scope.user = angular.copy ($scope.master);
This does not work: my <select> still shows Select value. But other elements properly reflect the change.
What am I doing wrong?
I created a fiddle there.
//Add track by in ng-options ..check below code
<div ng-app="my-app">
<div ng-controller="MyCtrl">
<select ng-model="user.option"
ng-options="value.label for (key, value) in data.options track by value.label">
<option value="">Select value</option>
</select>
<p>Selected: {{user.option.label}}
</div>
</div>