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.
Related
I have a loop "ng-repeat" inside of
<select ng-model="something"></select>
so that each option in a list is rendered as an
<option>
inside of select block. My aim is to make "something" (which is a ng-model attached to select) to be equal to a selected object inside of the list. At this moment when I do "value="{{option}}" as a parameter of option, I have a JSON object as a String. But what I need is to get an object as an object. The code looks like this:
<select ng-model="something">
<option ng-repeat="option in list" value="{{option}}">{{option.name}}</option>
</select>
The thing I want is easily done by using ng-options, but I need to add additional "style" parameters depending on option.anotherField to each
<option>
You can use ng-value instead of value, which gives you the object you want:
<select ng-model="something">
<option ng-repeat="option in list" ng-value="option">{{option.name}}</option>
</select>
What about approach via temp proxy and it's relation with something variable with the help of ng-change($scope.setModel) directive:
(function(angular) {
'use strict';
angular.module('app', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [{name:'Tom',age:23},{name:'Max',age:33},{name:'Sam',age:43}];
$scope.something = $scope.list[0];
$scope.temp = $scope.something.name;
$scope.setModel = function(){
for(var item of $scope.list)
if(item.name == $scope.temp){
$scope.something = item;
break;
}
}
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ExampleController">
<select ng-change='setModel()' ng-model='temp'>
<option ng-repeat='option in list track by option.name' ng-attr-title='{{option.age}}'>{{option.name}}</option>
</select>
<div>something: {{something | json}}</div>
</div>
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 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.
In Angular.JS, is there a way to bind two different ng-models when a select drop down option is selected?
Angular code:
<select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
<option value="">Select a Style</option>
</select>
Results in:
<option value="{{item.id}}">{{item.name}}</option>
With the Angular code I have so far, when an option is selected, it will save the option's value to the ng-model. In this case item.id is bound to vm.data.styleId.
However in addition to this, I also need to bind the 'item.name' of the selected option. Basically, when an option is selected, I need to bind both the item.id to vm.data.styleId, and the item.name to vm.data.name.
Is there an easy way to do this using Angular.JS?
Solution (using the answer from lisa p.):
In the View:
<select ng-model="vm.styleItem" ng-change="vm.getDetails()" ng-options="item as item.name for item in vm.getStylesData.styles">
<option value="">Select a Style</option>
</select>
Inside the controller:
vm.getDetails = function () {
// set the values of the select drop down
vm.data.styleId = vm.styleItem.id;
vm.data.style = vm.styleItem.name;
}
You can bind to an object containing both values like
item = { styleId: 23, name: "the name" }
vm.data = {{ styleId: ..., name: ... }}
then you bind to vm.data with
<option value="{{item}}">{{item.name}}</option>
Controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.vm.data.styleId = "";
$scope.item = {id : '1', name : 'name'};
});
html
<div ng-controller="myCtrl">
<select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
<option value="{{item}}">{{item.name}}</option>
</select>
</div>
Make an object which holds both id and name and pass that object as value to option
Learning more about AngularJS everyday.
A style contains style.StyleID,style.StyleName,style.EncryptedValue
I have the following code:
<select data-ng-model="StyleID"
data-ng-options="s.StyleID as s.StyleName for s in styles"
data-ng-change="GetOptions()">
<option value="">--Select Style--</option>
</select>
I need to pass EncryptedValue into GetOptions() e.g (GetOptions(EncryptedValue)) or be able to access something like SelectedStyle.EncryptedValue
How do I go about doing that?
UPDATE
Changed my code to:
<select data-ng-model="style"
data-ng-options="s.StyleID as s.StyleName for s in styles"
data-ng-change="GetOptions()">
<option value="">--Select Style--</option>
</select>
My Controller:
$scope.GetOptions = function ()
{
alert($scope.style);
}
alert($scope.style); returns a string of the StyleID
alert($scope.style.StyleID); returns undefined
What is going on ???
Note: styles is loaded via AJAX call (JSON result).
You might have to rework how you handle things in your controller but you can change your model to this:
<select data-ng-model="selectedStyle"
data-ng-options="s as s.StyleName for s in styles"
data-ng-change="GetOptions()">
<option value="">--Select Style--</option>
</select>
Then in your controller, you can do this
$scope.GetOptions = function(){
console.log($scope.selectedStyle.EncryptedValue)
};
The only thing is now if you want to reference your StyleId you have to do it this way:
$scope.selectedStyle.StyleId