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
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>
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
I am working on a angularjs form. I want to pass definition.clazz to a js function. In the controller, i have a js function like :
$scope.createData=function(clazz){
// do stuff
}
Here is the snippet of form :
<select class="form-control" id="type" name="type" ng-model="definition.clazz">
<option value="PrimitiveType"
ng-selected="type.type=='PRIMITIVE'">
PrimitiveType
</option>
<option value="EnumerationType"
ng-selected="type.type=='ENUM'">
EnumerationType
</option>
</select>
<button type="button"
class="btn btn-primary"
ng-click="createData(definition.clazz)">
Create Data
</button>
When I click to create Data button, the ng-model is not set. Even when I print definition.clazz in console log.
How to get the select value of select?
Thanks.
Have you tried using ng-options instead? My guess is that ng-model probably requires that on the select.
Try this:
<select class="form-control"
id="type"
name="type"
ng-model="definition.clazz"
ng-options="option in ['PrimitiveType','EnumerationType']">
</select>
#Pracede, is this the working solution that you want to achieve?
The value of ng-model is shown in console:
var app = angular.module("app", []).controller('appCtrl', ['$scope',
function($scope) {
//$scope.type ={type="PRIMITIVE"}; // the tricky part?
$scope.type = {};
$scope.type.type="";
$scope.createData = function(clazz) {
if(clazz==undefined)
{
console.log("SELECT THE TYPE");
return;
}
if(clazz=='PrimitiveType')
{
$scope.type.type='PRIMITIVE';
console.log(clazz + ' ' + $scope.type.type);
}
else
{
$scope.type.type='ENUM';
console.log(clazz + ' ' + $scope.type.type);
}
}
}
]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body ng-controller="appCtrl">
<select class="form-control" id="type" name="type" ng-model="definition.clazz">
<!--<option value="PrimitiveType" ng-selected="type.type=='PRIMITIVE'">PrimitiveType</option>
<option value="EnumerationType" ng-selected="type.type=='ENUM'">EnumerationType</option>-->
<option value="PrimitiveType">PrimitiveType</option>
<option value="EnumerationType">EnumerationType</option>
</select>
<button type="button" class="btn btn-primary" ng-click="createData(definition.clazz)">
Create Data
</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
EDIT:
You can look these similar problems on SO:
How does ng-selected work?
Updating model with ng-options and ng-selected
but this is my understanding and one of solutions of your problem.
You can change the type with value inside the option and set the type depending on value in controller's function. So, there is no need to to use ng-selected (my opinion in this case).
I hope this addition will push you forward.
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