We have some drop downs in our app that we can NOT use ng-options with because we need to set the title attribute on the <options> tag itself which is not possible with ng-options.
The reason we need the title is because IE < 9 chops off values that are to long and they are only visible with the title(shows up on hover of the element)
Now, to see the issue I'm having look at the following JS fiddle.
http://jsfiddle.net/nstuart/nF7eJ/
(HTML Bit)
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="params.value">
<option value="">Any</option>
<option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" ng-selected="{{v.value == params.value}}">{{v.name}}</option>
</select>
<p>{{params.value}}</p>
</div>
Ideally the select would have 'test3' selected, but you can see it gets set to an empty option instead. I understand this is from the fact that the value of ng-model is not present in the ng-options, but thats because I have not defined one!
Any ideas on how to get something like this working? Possibly even be able to add title to the options generated by ng-options so we could use that instead?
EDIT
Updated the fiddle at: http://jsfiddle.net/nstuart/nBphn/2/ to as described in the answer below.
Actually, just remove the curly braces from the expression in ng-selected and it will work:
<option ng-repeat="v in options"
value="{{v.value}}"
title="{{v.name}}"
ng-selected="v.value == params.value">{{v.name}}
</option>
fiddle
<option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}"
ng-selected="checkOption(v.value)">{{v.name}}</option>
$scope.checkOption = function(value){
return($scope.params.value == value);
}
Fiddle
[UPDATE] forgot to pass value variable. Updated fiddle and answer.
For manual options, you only need to use ng-model directive. This ng-model directive gives two way data binding for the selected option.
jsfiddle: http://jsfiddle.net/rpaul/1p9b5et8/1/
<body ng-app ng-controller="AppCtrl">
<select ng-model="selectedFruit" >
<option value ='1'> Apple</option>
<option value ='2'> Orange</option>
</select>
Selected value is {{selectedFruit}}
</body>
function AppCtrl($scope) {
$scope.selectedFruit = '1';
}
You might also want to take a look at the select2 directive in http://angular-ui.github.com/#directives-select2
In my code, I re-calculate select title on ng-change="changeItem()"
HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-options="item.id as item.title for item in items"
ng-model="selectedId" ng-change="changeItem()" title="{{myTitle}}">
<option value="" disabled selected style="display: none;">Select Item</option>
</select>
<div>
{{selectedId}}
</div>
<div>
{{myTitle}}
</div>
</div>
app.js
angular.module('myApp', []);
function MyCtrl($scope) {
$scope.items = [{
id: 1,
title: "Icebox"
}, {
id: 2,
title: "Summer"
}, {
id: 3,
title: "Milestone"
}];
$scope.changeItem = function() {
$scope.myTitle = undefined;
for(var i=0; i<$scope.items.length; i++){
if($scope.items[i].id == $scope.selectedId){
$scope.myTitle = $scope.items[i].title;
}
}
}
}
Fiddle
Related
I have a dropdown which uses ng-options (angular).
I have a default option selected with an empty value. (so it has the "selected" attribute and same value as the model)
Whenever I add another element to the ng-options, which is not empty, if the model has an empty value (which is pointing to the default empty option), the new added option is automatically selected.
The value of the model is still empty, but the dropdown now shows the new added option automatically.
I've also tried to make the default option be " " instead of just "", but it still does the same change.
Any way to guarantee new added options are not automatically selected?
`<select class="form-control section" ng-model="action.prop">
<option value="" disabled selected>Select Property</option>
<option ng-repeat="prop in tr.props| orderBy:prop.name"
value="{{prop.name}}"> {{prop.name}} </option>
</select>`
Try this :)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
<p>{{selectedName}}</p>
<button ng-click="add()">add</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [""];
$scope.selectedName = $scope.names[0]
$scope.add = function() {
$scope.names.push("new");
}
});
</script>
</body>
</html>
You can simply just set your ng-model in the controller to the following before running your get dropdown function. This way it will always be set to default.
Controller
$scope.action = {};
$scope.action.prop = '';
Even though Roth's solution would work well in my case.
So would Nishant's if I used ng-options and a filter.
I decided instead, on the ng-repeat, to have an ng-if="prop.name != ''".
Since what was happening for me was that for about a second, ng-repeat would have latest prop with empty name for a second, and as ng-model = "", it was setting that option as selected.
<select class="form-control section" ng-model="action.prop">
<option value="" disabled selected>Select Property</option>
<option ng-if="prop.name != ''" ng-repeat="prop in tr.props| orderBy:prop.name"
value="{{prop.name}}"> {{prop.name}} </option>
</select>
I'm having problems with select option in Angularjs
This is code in file js
$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: Car });
$scope.ListOption.push({ Value: "1", Name: House });
Here's what the code HTML looks like
<select class="form-control" id="Category" ng-model="Category">
<option ng-repeat="option in ListOption" value="{{option.Value}}">
{{option.Name}}</option>
</select>
The generated html is
<select class="form-control ng-pristine ng-valid" ng-model="Category" style="padding: 0px;">
<option value="? object:null ?"></option>
<option ng-repeat="option in ListOption" value="0" class="ng-binding ng-scope">Car</option>
<option ng-repeat="option in ListOption" value="1" class="ng-binding ng-scope">House</option>
</select>
I have quite a headache on this issue. Looking forward to having someone help me the other way
AngularJs tend to do this (generate extra option elment) when the value of the variable in ng-model doesn't match any of the values of the existing <option>.
You can solve it by setting an initial value (of the same type also), and it's one of the values in your <option> elements .
Or add one <option> element without value and with text Select one inside it. so it'll be selected.
function MyController($scope) {
$scope.Category = "1";
$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: 'Car' });
$scope.ListOption.push({ Value: "1", Name: 'House' });
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyController">
<select class="form-control" id="Category" ng-model="Category"
ng-options="item.Value as item.Name for item in ListOption">
</select>
{{Category}}
</div>
Make sure $scope.Category is the same type (not only value) as Value in ListOption variable, otherwise AngularJs will create extra option and select it.
The first option
<option value="? object:null ?"></option>
is generated because the ngModel value Category is not defined and select will match the value of Caegory with its options. Since no option is undefined, it adds a dummy option itself.
To solve this yyu can initialize the ngModel value Category to the first option automatically or add a new option with value as blank string and then initialize Category to blank string. It will also trigger your validation if any.
New options would be
$scope.Category = "";
$scope.ListOption = [];
$scope.ListOption.push({ Value: "", Name: "Please Select" });
$scope.ListOption.push({ Value: "0", Name: "Car" });
$scope.ListOption.push({ Value: "1", Name: "House" });
Hope it helps.
As you wanted to mention the first value as default you can use ng-selected in option to set 0 as default. Below mentioned code sample for your reference.
<select class="form-control" id="Category" ng-model="Category">
<option ng-repeat="option in ListOption" value="{{option.Value}}" ng-selected="option.Value == '0'">
{{option.Name}}</option>
</select>
I'm trying to get value when I select an option from an AngularJS chosen localytics dropdown.
Here's the code for the dropdown:
<select chosen style="width: 250px"
ng-model="StudentId"
ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent">
<option value="">Select</option>
</select>
<h2>Chosen with static options: {{ StudentId }}</h2>
<input type="button" value="Search" ng-click="GetStdCourseList(StudentId)">
And in my controller I have the following function:
$scope.GetStdCourseList = function (StudentId) {
alert(StudentId);
};
When I use alert then it show me 'Undefined' instead of showing value
How can I solve this?
Actually this is ok and I get value when I'm not using chosen search but when I use 'chosen' then it's not working.... Here is the screenshot:
Thanks a lot.
I think you have not selected any options before clicking the button. This works fine for me when I select the option.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.allStudent = [{StudentId: 0, Name: 'name1'}, {StudentId: 1, Name: 'name2'}];
$scope.GetStdCourseList = function (StudentId) {
alert(StudentId);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select chosen style="width: 250px"
ng-model="StudentId"
ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent">
<option value="">Select</option>
</select>
<h2>Chosen with static options: {{ StudentId }}</h2>
<input type="button" value="Search" ng-click="GetStdCourseList(StudentId)">
</div>
well, since ng-model's object is $scope.something itself, try to
replace
alert(StudentId)
become
alert($scope.StudentId)
and i don't think on this case you will need param. just ignore it because $scope covered it for you
that's will do
edited for better readability
Morning, here is what happens.
I made a dev, it was working fine, but only with firefox.
When i tested it with chrome...it wasn't working at all.
So, I have a select and I want to save the selected value to deal with it later.
Here is my angular:
if ($scope.dateTemp == "") {
$scope.displayNotification('error', "Empty date");
} else {
alert($scope.dateTemp);
//dateTemp treatment
}
AND
$scope.saveDate = function(dateMin){
alert(dateMin);
$scope.dateTemp=dateMin;
};
My view:
<p>Select date
<br/>
<select ng-model="date_selection" ng-change="saveDate(dateMin)">
<option ng-repeat="dateMin in listeDate" track by $index>{[{dateMin}]}</option>
</select>
</p>
When i tried this, i got undefined with my alert (btw saveDate function is just a setter for $scope.dateTemp)
Moreover when i try this, it works fine, but not with chrome.
<select ng-model="date_selection">
<option ng-click="saveDate(dateMin)" ng-repeat="dateMin in listeDate" track by $index>{[{dateMin}]}</option>
</select>
Thanks for your advice.
You can also use ng-options inside select tag
Controller :
app.controller('MainCtrl', function($scope) {
$scope.listeDate = [{"value":1,"text":"date1"},
{"value":2,"text":"date2"},
{"value":3,"text":"date3"},
{"value":4,"text":"date4"}];
$scope.Print=function(){
alert($scope.selected);
}
});
HTML:
<body ng-controller="MainCtrl">
<select ng-options="date.value as date.text for date in listeDate" ng-model="selected" ng-change="Print()"></select>
</body>
Working plunker link
track by $index should be included in the ng-repeat directive.
<select ng-model="date_selection" ng-change="saveDate(dateMin)">
<option ng-repeat="dateMin in listeDate track by $index">{[{dateMin}]}</option>
</select>
track by is an option of ng-repeat directive which helps to identify unique every item in the array.
Short example:
function TodoCtrl($scope) {
$scope.date_selection;
$scope.listeDate = ['date1','date2'];
$scope.saveDate=function(date_selection){
console.log(date_selection);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<select ng-model="date_selection" ng-change="saveDate(date_selection)">
<option ng-repeat="dateMin in listeDate">{{dateMin}}</option>
</select>
{{date_selection}}
</div>
</div>
I test it and it works in chrome and mozilla.
Hello I have tried implementing the changes provided in several examples yet none seem to work. I do have an ng-model and I clearly define the property of the object I would to receive. However it still does not work.
Any help would be great.
HTML
<select chose ng-model="selected" ng-options="type as type.Name for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
Controller
$scope.selected = ansExplanOpt.data;
The object is populating (I checked) and the properties it has are Name and Id.
Any help would be great. Thanks
You were very close. Just looks like a misuse of the ng-model value. Your code should be something like
<select chose ng-model="selectedValue" ng-options="type.Id as type.Name for type in ansExplanOpt">
</select>
And the ng-model will be what the user has selected.
Their documentation breaks it down well also:https://docs.angularjs.org/api/ng/directive/ngOptions
Here is solution:
ng-model is the value that user selected.
function TodoCtrl($scope) {
$scope.ansExplanOpt = [
{text:'learn angular', id:1},
{text:'build an angular app', id:2}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<select chose ng-model="select" ng-options="type as type.text for type in ansExplanOpt">
<option value="">-- Select an Option --</option>
</select>
{{select.text}}
<br>
{{select}}
</div>
</div>
You can define which element in the array you want to be preselected:
var myApp = angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.data = [{
label: 'blah',
value: 'blah'
}, {
label: 'blah1',
value: 'blah1'
}, {
label: 'blah2',
value: 'blah2'
}];
$scope.sel = $scope.data[0];
}]);
html:
<div ng-controller="TestController">
{{sel}}
<select ng-model="sel.value" ng-options="d.value as d.label for d in data">
</select>
</div>
See jsfiddle for more details