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
Related
I have a dropdown list:-
<label>User Code:</label>
<select ng-options="c as c.User for c in userList"
ng-model="selectedUser" id="search3">
</select>
The data in this dropdown is coming from an API. My directive code:-
scope.getAllPeriodicities = function(){
scope.userList = [];
ApiServices.getAllPeriodicities().then(function (response) {
scope.userList = response.data;
});
}
scope.getAllPeriodicities();
There is an User Code:-SS1234. I want this user to be selected whenever the page loads. I am thinking of using selected attribute but not sure how to use it on the fetched data.
scope.getAllPeriodicities = function(){
scope.userList = [];
ApiServices.getAllPeriodicities().then(function (response) {
scope.userList = response.data;
scope.selectedUser = "SS1234";
});
}
scope.getAllPeriodicities();
simply asign, scope.selectedUser="SS1234" user you want.
scope.userList = response.data;
scope.selectedUser = scope.userList[0].User /* here i choose 0th index of user. you can change as you want */
Set your default value to the ng-model by using ng-init or ng-value
<select ng-options="c as c.User for c in userList" ng-model="selectedUser"
id="search3" ng-value={{selectedUser = 'SS1234'}}></select>
//or
<select ng-options="c as c.User for c in userList" ng-model="selectedUser"
id="search3" ng-init="selectedUser = 'SS1234'"></select>
In your controller add,
$scope.selectedUser = 'SS1234';
Basically i have a select dropdown
<select class="form-control" id="ursel"
ng-change="changeVal()"
ng-options="a for a in RatedVoltage" data-ng-model="TechCharacters.selectedUr">
<option value="" selected="selected">{{globalLangResource.SelectAny}}</option>
</select>
So on change of this select, have results reflecting to another select
viewModel.changeVal = function(){
var val = viewModel.TechCharacters.selectedUr;
if (val != undefined && val === "7.2kV") {
$rootScope.ud = viewModel.InsulationVoltage["7.2kV"]; // 20,30,40
}
}
The 2nd dropdown looks like this
<select class="form-control" id="udsel"
ng-change="setUd();"
ng-options="a for a in ud" data-ng-model="TechCharacters.InsulVolt">
<option value="" ng-if="false"></option>
</select>
Now i have a submit button, on submit,i am getting the main object.
console.log(TechCharacters);
Here i am not getting TechCharacters.InsulVolt value. it is showing empty.
If i have made change is the 2nd dropdown, the model is updated. until then i am not getting the changed model from 1st dropdown
Basically i want all the ng-model values inside form even it is changed or not.
if you want the first object of second dropdown on change of first one. change code to .
viewModel.changeVal = function(){
var val = viewModel.TechCharacters.selectedUr;
if (val != undefined && val === "7.2kV") {
$rootScope.ud = viewModel.InsulationVoltage["7.2kV"]; // 20,30,40
viewModel.TechCharacters.InsulVolt=$rootScope.ud[0]
}
}
hope it will help you
You can actually do this. This will work.
<select data-ng-model="TechCharacters.selectedUr"
<option ng-selected="{{obj == TechCharacters.selectedUr}}" value="{{obj}}" ng-repeat="(key,value) in RatedVoltage">
</select>
Basically you are doing ng-selected and comparing the ng-model value with that of the ng repeat value, and the selected value will be shown.
I'm new to Angularjs and I have selectBox with two variables (startDate and endDate):
<div>
<select class="form-control" ng-model="date.time">
<option ng-repeat="time in dateList" value="{{time.startDate}},{{time.endDate}}" >
{{time.startDate| date:'medium'}} - {{time.endDate | date:'medium'}}</option>
</select>
</div>
After the user select a period I want to get the startDate and endDate separately.
Did you try looking at what your value holds when you're done selecting? You'll get the string you put inside the option's value.
var dates = $scope.date.time.split(','),
startDate = dates[0],
endDate = dates[1];
With the ng-options syntax you can set to your date.time the whole object:
<select class="form-control" ng-model="date.time" ng-options="time as ((time.startDate | date:'medium') + ' - ' + (time.endDate | date:'medium')) for time in dateList"></select>
What ever you have bound in your ng-model will hold the selected value.
In your case the ng-model is holding date.time, which may not be what you are looking for.
Additionally you should set the value to be the data that you wish to extract from the option list.
Please see this (poorly and quickly constructed) jsFiddle
html
<div ng-controller="MyCtrl">
<select class="form-control" ng-model="selected">
<option ng-repeat="time in dateList" value="{{time}}" >
{{time.prop}}</option>
</select>
{{selected}}
</div>
js
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.selected = 'plz select a thing';
$scope.dateList = [{prop:'prop1'}, {prop:'prop2'}];
}
How to update new value choosing from select box on click save button.
I am using ng-click function like this in my JS function for update button:
$scope.updateDealDetail = function updateDealDetail (){
$scope.showEditView = !$scope.showEditView;
$scope.dealDetail.decisionMakerDetail.email = $scope.selectedid;
}
My function for edit button:
$scope.editUserDetail = function editUserDetail(){
$scope.showEditView = !$scope.showEditView;
$scope.showSubmitView = !$scope.showSubmitView;
deal.getIdData($scope.accountDetail. accountUsers[0].role,$scope.accountDetail.id).then(function successCb(data){
$scope.editIdOptionsData=data;
$scope.selectedid = $scope.editIdOptionsData[0].email;
});
};
and my HTML for bitton click is like this :
<select ng-model="selectedid" class="form-control">
<option ng-selected="selectedid" ng-repeat="eiod in editIdOptionsData" value="{{eiod.email}}">{{eiod.email}}
<button ng-click="updateDealDetail(eoid.email)" ng-disabled="dealDataSaveButtonDisabled">Update</button>
I am trying to this through ng-repeat because of by using ng-options my data through API is now showing in the box. But My data which is on first index is only getting set. What to do to set the a default value for the selection box and by selection any value, onclick need to update that value.
Don't use ngRepeat to render options, this is your problem. Correct code would be:
<select class="form-control"
ng-model="selectedid"
ng-options="eiod.email as eiod.email for eiod in editIdOptionsData">
</select>
Best practice to use ng-options, ng-model and ng-change on the <select> element
Online demo - https://plnkr.co/edit/Gaa8sMgerRv6chio4iYa?p=preview
html
<select
ng-model="selectedItem"
ng-change="onSelectedItemChanged()"
ng-options="item as item.email for item in items"></select>
js
app.controller('MainCtrl', function($scope) {
$scope.items = [{
email: 'asd1#asd.com'
}, {
email: 'asd2#asd.com'
}];
$scope.selectedItem = $scope.items[0];
$scope.onSelectedItemChanged = function() {
alert('you changed it to ' + $scope.selectedItem.email);
}
});
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];
});
});