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>
Related
nameList contains [“Julia”, “Evan”, “Tomas”];
select ng-model=“names” ng-options=“x for x in nameList”
In controller, I have a service api call GetNameByID/{id}”and depending on the id, I want to initialize the dropdown value of the modal form.
So if the user clicks ID 1, the dropdown defaults to Julia.
The problem is within the service call, when I try to initialize the model by doing $scope.names = data, it adds an empty option at the top instead of selecting Julia. When I console.log(data), it prints “Julia” but it becomes <option value=“?”></option>
How can i fix this?
So Lets have a HTML example for this case:
<div ng-app ng-controller="MyCtrl">
<select ng-model="names" ng-options="item for item in nameList">
</select>
<p>Selected : {{names}}</p>
<button ng-click="Update(2)"> Update(1)</button>
</div>
and Conrtoller has one service call which update your dropdown accordingly based on index.
function MyCtrl($scope) {
$scope.names = "Julia"
$scope.nameList = ["Julia", "Evan", "Tomas"];
$scope.Update = function(_value){
$scope.names = $scope.nameList[ parseInt(_value)] ;
}
}
Please have a look into running code, jsfiddle.
You can just use ng-init to initialize the dropdown first value like so:
<select ng-model="names" ng-init="names = data[0]" ng-options="x for x in data">
<option value="">Select</option>
</select>
Where [0] in data[0] is the position of the array.
Here is an example where you can set the option
In html file
<select ng-model="selectedName" ng-options="x for x in nameList"></select>
In js file
app.controller('myCtrl', function($scope) {
var id = 1;
$scope.names = ["Julia", "Evan", "Tomas"];
$scope.selectedName = $scope.names[id-1]; <---- here you can pass you id.
});
subtract id with 1 because array start with 0. Hope this is what you want to acheive.
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>
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 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.
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.