I am using ng-selected to get the selected value from a dropdown. But instead it's showing as blank.
I have tried the following code:
<div>
<select id="user_org" ng-model="selectedorg.allValue" ng-change="qrochange(this)" material-select watch required >
<option ng-selected='{{selectedorg.allValue == user.user_org}}' ng-repeat="user in orgowners | unique:'user_org'" value="{{user.id}},{{user.user_org_quota}}">{{user.user_org}}</option>
</select>
<label for="user_org">Organization</label>
</div>
Controller.js:
var orgowners = Restangular.one("users/" + user_id + "/list");
orgowners.getList().then(function(projects) {
$scope.orgowners = projects;
var parent_index = $scope.findIndexByKeyValue($scope.orgowners,'id',$scope.id);
$scope.selectedorg= $scope.orgowners[parent_index];
$scope.selectedorg.allValue = $scope.selectedorg.id+','+$scope.selectedorg.user_org_quota;
$scope.qro = $scope.selectedorg.user_org_quota;
})
$scope.qrochange = function(event) {
id = event.selectedorg.allValue;
var quota_res = id.split(',')[1];
$scope.qro = quota_res;
$scope.user_org_quota = parseInt(quota_res);
}
How do I get the selected value?
ng-model should give the selected value.
An easier way to render the dropdown is using ng-options. Something like:
<select ng-model="selectedorg" ng-options="user.user_org for user in orgowners | unique:'user_org'">
See also: angularjs ngOptions
When trying to get the value of selected option on a dynamically added select when clicking a button I get always undefined.
$(document).on('click', '#ChangeResp', (function(){
var test = $(document).find('#responsiblelist');
var test2 = $(test).filter(":selected").val();
console.log(test2);
}));
If I do console.log(test) I see the correct element is being picked.
EDIT#1 I'm using select2
Here is the HTML code.
<div class="form-group is-empty">
<label class="control-label" for="responsiblelist"><strong>Responsible Name</strong></label></br >
<select id="responsiblelist" title="Select Responsible" class="select2_single form-control" tabindex="-1">
<option></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</div>
<script type="text/javascript">
$(document).on('click', '#ChangeResp', (function(){
var username = $(document).find('#responsiblelist').children("option").filter(":selected").val();
console.log(username);
}));
</script>
The reason why I'm getting always undefined is because I'm always getting first option which has no value (this is a requirement for select2 usage) otherwise I would start select with one option already selected.
Try this,
$('select[name=responsiblelist]').val()
If you need to get the value of the selected option, it can be much simpler:
$(document).on('click', '#ChangeResp', (function(){
var test = $('#responsiblelist').val();
console.log(test);
}));
Look through the children of the list, then use filter to get the value of your selected option
$(document).on('click', '#ChangeResp', (function(){
var test = $("#responsiblelist").children("option").filter(":selected").val​();
console.log(test);
}));
The View Part
<div class="col-sm-8" data-ng-init="init_enable_disable()">
<select class="form-control" style="margin-top: 5px;" data-ng-model="schedule.scheduleType" data-ng-change="enable_disableDiv(schedule.scheduleType);">
<option ng-selected="{{type == defaultSelectedType}}" data-ng-repeat="type in schduleType">{{type}}
</option>
</select>
</div>
ng-repeat model
$scope.schduleType = ['Recurring', 'One time'];
I am updating the ng-model at the later time but it does not reflect in view
if (editRecord.freq_type === 1)
{
alert("one time");
$scope.schedule.scheduleType = 'One time';
}
what is going wrong please suggest me.
When you use ng-model and assigned value from controller no need to no need to use ng-selected in DOM. and better to initialize from controller.
Can try it
in your controller:
$scope.schduleType = ['Recurring', 'One time'];
$scope.schedule = {};
$scope.schedule.scheduleType = $scope.schduleType[0]; // initial select
$scope.enable_disableDiv = function(){
console.log($scope.schedule.scheduleType);
}
in HTML:
<select class="form-control" data-ng-model="schedule.scheduleType" data-ng-change="enable_disableDiv(schedule.scheduleType)">
<option ng-repeat="type in schduleType" value="{{type}}">{{type}}</option>
</select>
N.B: If you want to change option value from your controller then you should use $scope.schduleType instead of someValue for referencing because of when assign value from controller then not refer the schduleType . like want change based on condition then use like:
if(editRecord.freq_type === 1) {
$scope.schedule.scheduleType = $scope.schduleType[1];// not "one Time"
}
you could try
`$scope.$applyAsync(function(){
$scope.schedule.scheduleType = 'One time';
})`
I am unable to update value of select from AngularJs.
Here is my code
<select ng-model="family.grade" >
<option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option>
</select>
Here are the options which i am using to populate my select
var options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
Here is mu js code.
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = "1"
})
When ever value of family_member.date_of_birth changes it should set they value of select to 1. But this change is not visible on UI.
You should use ngSelected to select the option.
it could be something like this:
<select ng-model="family.grade" >
<option ng-repeat="option in options"
value='{{option.id}}' ng-selected="family.grade==option.id">
{{option.text}}</option>
</select>
Hope this helps.
I think you are looking for the track by clause of ng-options:
<option ng-repeat="option in options track by option.id">{{option.text}}</option>
However, you will still need to supply an object with an id property to set:
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = { id: "1" }
})
The options array indiviual elements are objects. So the respective ng-model also need to be an object. So even when it is being changed in js, the respective object has to be provided rather than a string.
Sample demo: http://plnkr.co/edit/naYcnID29SPa90co0leB?p=preview
HTML:
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
$scope.family = {};
$scope.family_member = {
date_of_birth: '10-Jan-1986'
};
$scope.$watch("family_member.date_of_birth", function(newValue, oldValue) {
$scope.family.grade = $scope.options[2];
});
});
This is a common problem however when trying to use the solutions provided here on Stackoverflow I am having no success... I have the following in my HTML view:
<select class="date-input" ng-model="reservation.date">
<option ng-repeat="d in dates track by $index"
value="{{ d }}"
> {{ d }} </option>
</select>
In my controller I have the following...
$scope.makeDates = (function () {
dArray =[];
// we make a big array of dates ['dd-mm-yyyy','dd-mm-yyyy', 'dd-mm-yyyy'...] for 3 months and return it
return dArray;
}();
$scope.reservation = {
date : null,
time : null,
quantity : null
};
$scope.dates = $scope.makeDates;
$scope.reservation.date = $scope.dates[0];
However despite me setting $scope.reservation.date = $scope.dates[0]; the select still produces a blank option and is the default/selected value!?!?! Am I missing something? I know it is early but I can't see what I am doing wrong?
You don't need attribute value="{{ d }}" for <option>. This is a reason why you get empty item.
HTML
<div ng-app='myApp' ng-controller="ArrayController">
<select class="date-input" ng-model="reservation.date">
<option ng-repeat="d in dates track by $index">{{d}}</option>
</select>
</div>
Demo Fiddle