angular js select box comes empty option at first - javascript

I am using angular 1.6.4 I want to display ages in select box so get values from controller, I use below code, but first field will come empty? please help me how to solve it
<select ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>

the first option comes empty because you did not select a ngModel. add value to ngModel and also use ng-options instead ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.ages = [2,3,4];
$scope.agefrom = $scope.ages[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 ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%" ng-options="age as age for age in ages">
</select>
</div>

You can simply use ng-init like this
<select ng-init="agefrom = ages[0]"
ng-model="agefrom"
name="agefrom" id="agefrom" class="select"
style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>

Related

AngularJS ng-model on select input doesn't work

I'm starting with AngularJS and tried to do a and get its value with Angular, but it doesn't work.
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-model="sortBy"> {{sortBy}}
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<div>
Here I want to display the value of the select input, but it displays nothing. I can't access this value from the controller neither, and I don't understand why.
I have a ng-repeat on the same page that works perfectly well.
I even tried to copy past the example from angularjs.org, even this doesn't work...
Since you are using controller as syntax, you need to use ng-model="controlsortBy"
DEMO
var app = angular.module('testApp',[]);
app.controller('ArticlesController',function(){
var control = this;
control.print = function(){
console.log(control.sortBy);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-change="control.print()" ng-model="control.sortBy">
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<h1> {{control.sortBy}}</h1>
<div>

Angular select with ng-repeat doesnt work on json object

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option}}">{{option.name}}</option>
</select>
The Above code works but it leaves me unable to retrieve the id field of the option element. See the different Plunker - working example with value={{option.id}} https://plnkr.co/edit/?p=preview - example with value={{option}} https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.
If I use ng-options in select it works - https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.
Do I need to filter ng-model?
You can't retrieve the id because by passing the option object in value you're converting it to a string, so data.model became "{"id":"1","name":"Option A"}". In order to pass the object use instead ng-value:
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" ng-value="{{option}}">{{option.name}}</option>
</select>
What I understand from your question the below code should work
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<!--<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option as option.name for option in data.availableOptions">-->
<!-- </select>-->
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
</body>

ng-selected not working with ng-options but works fine with ng-repeat

Iam using ng-selected, ng-value, ng-options. But I am unable to select the value, ng-selected not working
<select name="team_selected"
required="" ng-model="edit_team_name" ng-change="edit_selectTeam(edit_team_name)"
ng-selected='edit_team_id === team.team_id' ng-value="team.team_id"
ng-options="team.team_name for team in teamNameAvailable track by team.team_id">
</select>
<select name="team_selected" required="" ng-model="edit_team_name" ng-change="edit_selectTeam(edit_team_name)" >
<option ng-repeat="team.team_name for team in teamNameAvailable track by team.team_id" ng-selected='edit_team_id === team.team_id' ng-value="team.team_id"></option
</select>
In your case, I have created a default value with selected in select box
instead of doing edit_team_id === team.team_id this ng-model itself will select the select value form options
var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.teamNameAvailable=[{
team_id:1,
team_name:"USA"
},{
team_id:2,
team_name:"India"
},{
team_id:3,
team_name:"Aus"
}];
$scope.edit_team_name=$scope.teamNameAvailable[1];
});
select{
width:150;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<select name="team_selected"
required="" ng-model="edit_team_name" ng-change="edit_selectTeam(edit_team_name)"
ng-options="team.team_name for team in teamNameAvailable track by team.team_id">
</select>
</div>

Select tag value in html disappears when selecting a value in angularjs

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.

how to add values from array to Bootstrap combobox with search

I am using the bootstrap combobox with search which is working fine when populated with static options as follows:
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control" style="display: none;">
<option value="" selected="selected">Type Planet name...</option>
<option value="0">Mercury</option>
<option value="1">Earth</option>
<option value="2">Venus</option>
<option value="3">Mars</option>
<option value="4">Jupiter</option>
</select>
</div>
</form>
I want to load the options dynamically from an array. i tried ng-options and ng-repeat but the values are not coming inside the combo box. I will prefer using javascript.
Tried option:
<select class="combobox input-large form-control" style="display: none;"
ng-model="PlanetData.selectedPlanet">
option value="" selected="selected">Type for Planet...</option>
<option ng-repeat="planet in PlanetData.availablePlanets" value=" {{planet.id}}">{{planet.planetName}}</option>
THis creates the combobox with the text "Type for channel", but the planetdata does not appear in the the combobox options rather it appears below it. I want to know how to bind the two so that the data comes in the combobox.
The problem is that when the combobox function is called the ng-repeat or the ngOptions didn't rendered the options yet.
One quick way to fix this is call the $('.combobox').combobox() inside a $timeout callback.
$scope.items = [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}];
$timeout(() =>
$('.combobox').combobox(), 0);
See the plunker with this example: https://plnkr.co/edit/j25lasvpHxmMNUjl7EjE?p=preview
I tested with ngRepeat and ngOptions.
var planet = ['Mercury','Mercury1'];
$.each(planet, function(index, value){
$('.combobox').append('<option value="'+index+'">'+value+'</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control">
</select>
</div>
</form>
The issue was because of the ng-options or ng-repeat not getting rendered when the combobox was appearing. Refer to the answer from Rafael, it has all the necessary details. I used the timeout as he suggested and it worked like a charm.
$timeout(() =>
$('.combobox').combobox(), 100);

Categories