I need to get a select value from a dropdown using angular.js
angular code:
var sbAdmin2 = angular.module('sbAdmin2',[]);
sbAdmin2.controller('dropdownCtrl', function($scope,$http){
$scope.chnagecustomer= function() {
$scope.value=$scope.dropdown;
console.log($scope.value);
};
});
html code:
<select
ng-controller="dropdownCtrl"
class="form-control"
ng-change="chnagecustomer()"
ng-model="selectedPerson"
id="p_client_main"
name="p_client_main"
tabindex="2">
<option value=""> </option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
in jquery .val() would work to get dropdown value which is selected
but I need to know the angular way.
I'm new in angular. Any help is much appreciated.
You always got selected value in ng-model (selectedperson in your code)
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.change = function () {
alert($scope.value);
}
})
simple example:
http://plnkr.co/edit/BEmcCWnmxRJvcGrM1Btp?p=preview
It doesn't appear that you're accessing the model's value in your change function. Edit that function to look like this:
$scope.chnagecustomer= function() {
$scope.value = $scope.selectedPerson;
console.log($scope.value);
};
try using {$scope.value=$scope.selectedPerson;} as thats your model variable
Try $scope.value=$scope.selectedPerson the value of your dropdown list should be the model.
Related
Can someone show me how to gather the value select on.change of the dropdown box and then use that value as a varible in my controller.
for some reason the $ColorPicked varible will not revolve in the $scope.base = response.data.type.$ColorPicked; BUT if i just remove the $ColorPicked and type in Red it works no problem.
I am still very new to Angular and JS for that matter so please excuse my stupidity. I have Googled and Googled for a clear cut answer and I got nothing.
INDEX.HTML
<h3>Color:</h3>
<select class="formBoxes" id="ColorPicked">
<option value="Red">Redd</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
SCRIPT.JS
$ColorPicked = "Red";
var app = angular.module("computer",['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main',{
templateUrl: 'archetype.html',
controller:'MainCtrl'
}).
otherwise({redirectTo:'/main'})
}])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$http.get('archetype.json').then(function(response){
$scope.base = response.data.type.$ColorPicked;
;
});
}]);
you need to use ng-model to bind the selected value to the controller's property. If you want to initialize the select input to a value on the model, then you need to use ng-options
<select ng-model="selectedColor"
ng-options="opt.value as opt.label for opt in opts">
</select>
and in your controller you would have the following on your scope:
$scope.opts = [
{ value:'red', label:'Red' },
{ value:'blue', label:'Blue' },
{ value:'green', label:'Green' },
]
$http.get(...).then( function( response ){
$scope.selectedColor = response.data.type.$colorPicked;
})
There are two things,
(i)You need to have a $scope variable defined for the ColorPicked inorder to provide the default selection.
(ii)You need to have ng-model which gets bind to the variable. Pass the selected Color to the function using the ng-change directive
HTML:
<select ng-model="ColorPicked" ng-change="setItem(ColorPicked)">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select>
Controller:
function MyCtrl($scope) {
$scope.ColorPicked = "Red";
$scope.setItem = function(opt) {
$scope.base =opt;
}
}
DEMO
Working Demo for your requirement
I want function get access selected option value by angularJs but not when select tag change or trigger event .
I Use this code when option change.
<select name='type' class='form-control' data-ng-model='type' data-ng-change='change(type)'>
<option value='asc' selected>asc</option>
<option value='desc'>desc</option>
</select>
var app = angular.module('app', []);
app.controller('ctrl', function($scope){
alert($scope.type);
});
Unless you set the default value all you get is null when you do something like console.log($scope.type); but the proper way is to initialize your model with the default value like $scope.type='asc'; first in your controller then you can access the default value whenever you want.
UPDATE: take a look at this Plunker
There are many ways of doing what you have asked. To start with if you want to set the default selected item then set it from the controller as I have done in the example below. So that later when you bind the select to something else then it will be rather simple for you ie. you won't have to change any code.
var app = angular.module('app', []);
app.controller('ctrl', function($scope){
$scope.type = 'asc';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select name='type' class='form-control' data-ng-model='type'>
<option value='asc'>asc</option>
<option value='desc'>desc</option>
</select>
<p>My Selected type: {{type}}</p>
</body>
I am trying to show different data from a large data object based on selections made in view via a select box. I am populating the data like this
$scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
And I have ng-model on my select options.
<select ng-model="networkType">
<option value="networkOne">One</option>
<option value="networkTwo">Two</option>
<option value="networkThree">Three</option>
</select>
<select ng-model="selectedType">
<option value="typeOne">One</option>
<option value="typeTwo">Two</option>
<option value="typeThree">Three</option>
</select>
I initialize both of these variables
$scope.selectedType = 'individual';
$scope.networkType = 'inNetwork';
And the $scope.displayData is initially correct. However when I change the drop downs, the displayData does not change its values to access the new data. I am not sure what step I am missing here.
I think you should update the display data using ng-change event.
Add a update function in your controller
$scope.updateDisplay = function() {
$scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
};
Add ng-change for your <select> element
<select ng-model="networkType" ng-change="updateDisplay()">
<option value="networkOne">One</option>
<option value="networkTwo">Two</option>
<option value="networkThree">Three</option>
</select>
<select ng-model="selectedType" ng-change="updateDisplay()">
<option value="typeOne">One</option>
<option value="typeTwo">Two</option>
<option value="typeThree">Three</option>
</select>
Or do it with $scope.$watch.
The $scope.watch() function creates a watch of some variable. When you register a watch you pass two functions as parameters to the $watch() function:
A value function
A listener function
The first function is the value function and the second function is the listener function.
The value function should return the value which is being watched. AngularJS can then check the value returned against the value the watch function returned the last time. That way AngularJS can determine if the value has changed.
In my example, we are setting up a watch on both networkType and selectedType models. And instead of it being a funtion we simply put the $scope model name.
$scope.$watch('[networkType,selectedType]', function(newValues, oldValues) {
$scope.displayData = $scope.dataObj[newValues.selectedType][newValues.networkType];
});
Add this method to your controller
$scope.onChnage = function () {
$scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
}
Html
<select ng-model="networkType" ng-change="onChnage ()">
<option value="networkOne">One</option>
<option value="networkTwo">Two</option>
<option value="networkThree">Three</option>
</select>
<select ng-model="selectedType" ng-change="onChnage ()">
<option value="typeOne">One</option>
<option value="typeTwo">Two</option>
<option value="typeThree">Three</option>
</select>
Beside $watch and ng-change, if you just want to display the data in displayData variable, another option is to convert it to a function display():
$scope.display = function () {
return $scope.dataObj[$scope.selectedType][$scope.networkType];
};
and in the view:
{{display()}}
this function will be called again whenever selectedType or networkType change
I am trying to get the option value when user selects a option in Angular way. I have something like'
<div ng-controller="test">
<select ng-model="selectedProduct" ng-options="product.name for product in products">
<option value="">Please select a product</option>
</select>
</div>
In my js
app.controller('test', function ($scope, $http, $modal) {
console($scope.selectedProduct) -> undefined.
})
I want to get the selected value when user makes a selection. Can anyone help me about it? thanks a lot!
You can use ngChange to fire an event whenever the value changes in the view:
<select ng-model="selectedProduct" ng-options="product.name for product in products"
ng-change="doSomething(selectedProduct)">
<option value="">Please select a product</option>
</select>
app.controller('test', function ($scope, $http, $modal) {
...
$scope.doSomething = function (product) {
// Do stuff with product
};
See, also, this short demo.
Try this:
<select ng-model="selectProduct" ng-options="option.id as option.name for option in options" ></select>
Secondly, where is your products in your controller?
Here is an example of this working. You should define a default value within your controller's $scope to ensure the value is defined. From there it is easy to access the model via {{ myproduct }} or $scope.myproduct depending on where it is being accessed.
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];
});
});