here fiddle:http://jsfiddle.net/TU6tp/47/
Here i am getting if i select any option in dropdown i will get same in in selectbox text but i need "Change portfolio" There should be select anyor change Portfolio.
If u see fiddle u will understand easily what i am trying to say
CODE
<select
ng-model="selectedItem"
ng-options="o.label for o in selectables">
</select>
<p>Portfolio manager: {{selectedItem.value}}</p>
<p>Group: {{selectedItem.manager}}</p>
<p>Group name: {{selectedItem.groupname}}</p>
you can use ng-change with two scope variables selectedItemx and selectedItem
Fiddle
<select
ng-model="selectedItemx"
ng-options="o.label for o in selectables" ng-change="changeLable()">
</select>
$scope.changeLable = function() {
$scope.selectedItem = $scope.selectedItemx;
$scope.selectables[0]['label'] = "CHANGE PORTFOLIO";
$scope.selectedItemx = $scope.selectables[0];
}
// this is the model that's used for the data binding in the select directive
// the default selected item
$scope.selectedItemx = $scope.selectables[0];
Related
I have a dropdownlist -
<select ng-model="contact.type" id="select_{{$index}}" ng-change="changedValue()" class="searchCriteria">
<option>Policy Number</option>
<option>Insured Name</option>
</select>
I want to get the selected item using angularjs. So far I have tried
$scope.changedValue = function () {
alert($(".searchCriteria option:selected").html());
}
among other things. But each time the alert shows "undefined". How do I get the selected option text?
You can just use the $scope variable,
$scope.changedValue = function () {
alert($scope.contact.type);
}
I want to build select list (select2) options when user clicks on html button.
My HTML:
<select id="mySel2" class="form-control" multiple="multiple">
<option ng-repeat="item in items" ng-selected="item.selected"
ng-model="item.tag">
{{item.tag}}
</option>
</select>
Angular js function code on button click:
var fruits=angular.module("myApp",[]);
fruits.controller('ctrlTags', function($scope){
/* I HAVE SET DEFAULT VALUE TO SELECT LIST*/
/* IT WORKING PERFECT WITH SHOWING SELECTED VALUES*/
var tagsData = [
{id:1,tag:'Apple'},
{id:2,tag:'Banana'},
{id:3,tag:'Cherry'},
{id:4,tag:'Cantelope'},
{id:5,tag:'Grapefruit'},
{id:6,tag:'Grapes',selected:true},
{id:7,tag:'Lemon'},
{id:8,tag:'Lime'},
{id:9,tag:'Melon',selected:true},
{id:10,tag:'Orange'},
{id:11,tag:'Strawberry'},
{id:11,tag:'Watermelon'}
];
$scope.items = tagsData;
/*NOW ON BUTTON CLICK GETKEY() FUNCTION WILL BE CALLED*/
/* AND I WANT TO RENDER/REFRESH SELECT LIST WITH NEW DATA */
$scope.getKey=function(data){
var newData = [
{id:4,tag:'car'},
{id:5,tag:'bat',selected:true},
{id:6,tag:'cat',selected:true},
{id:7,tag:'Lemon'},
{id:8,tag:'Lime'},
];
$scope.items=newData;
};
});
ISSUE:ON BUTTON CLICK IT IS UPDATING SELECT LIST VALUES BUT NOT SHOWING DEFAULT SELECTED VALUES
PLEASE TELL ME HOW TO REFRESH SELECTED VALUE AS WELL.
Use select2 (form-widgets.js)
$('[name="NAME"]').select2({placeholder: ''}).val(VAL).change();
You need to add model into select section ng-model="selected".
You can add for example first index
in controller $scope.selected = tagsData[0]
How can I get the object associated to the selected option inside within a dropdown (select)?
Here's my html:
<select ng-model="selSeason" ng-options="season as season.name for season in seasons"></select>
Every season is an object with several properties and I'd need to get the object associated to the selected object (and not only its text or value).
I know ng-repeat has something like (to select name of the 5th season):
element(by.repeater('season in seasons').row(4).column('name'));
Is there something similar for by.options() selector?
Thanks
You can use by.options with evaluate():
var seasonNames = element.all(by.options('season in seasons')).evaluate("season.name");
seasonNames.then(function (values) {
console.log(values); // array of season names is printed
});
You can also filter out the selected option with filter():
var selectedSeasonName = element.all(by.options('season in seasons')).filter(function (option) {
return option.getAttribute("selected").then(function (selected) {
return selected;
});
}).first().evaluate("season.name");
selectedSeasonName.then(function (value) {
console.log(value); // selected season name is printed
});
What you are looking for is the custom by.selectedOption locator.
element(by.selectedOption('model_name'))
For a better description, read this: https://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
I ended up evaluating not the selected option but the ng-model associated to the select:
HTML
<select ng-model="selSeason" ng-options="season as season.name for season in seasons"></select>
JS
element(by.model('selSeason')).evaluate('selSeason').then(function(season){
console.log(season.name);
});
Your binding looks good, you can read all the properties easily by using your ng-model variable 'selSeason', see this example
<select ng-model="user"
ng-options="x as x.name for x in users track by x.id"
class="form-control"
ng-required="true">
<option value="">-- Choose User --</option>
</select>
var id = $scope.user.id;
var name = $scope.user.name;
var role = $scope.user.role
For more detail check this
Can somebody show me an example on how to bind ng-options to a getter and setter model, a plnker demo will be great.
Example on what i want to accomplish:
// As you can see the item is a object with two properties example:
// {Text: "hello", Value: 10}
setgetObject: function(value) {
if (angular.isDefined(value)) {
myObject = angular.copy(value); //copy the incoming object
}
return ????
}
<select class="form-control" name="rumFra" ng-model="getterSetter.setgetObject"
ng-options="item as item.Text for item in vm.configuration.Form.Room track by item.Value"
ng-model-options=" {getterSetter: true }">
Each time I make a new selection on my dropdown it will set the myObject with the new value but the dropdown is not effected even if I return the input element.
A working example on how to use Select tag with ng-options and ng-model-options="{setterGetter= "true"}" will be appreciated :-)
Look at Numyx's example:
http://plnkr.co/edit/SqJG8NP7e9NB9okcD4hN?p=preview
Because it is working but not with objects. Can somebody do it with objects?
Just use ng-model . ng-model binds the input,select and textareas.
see the example
<select ng-options="p.name for p in animal"
ng-model="selectedanimal"></select>
Let's say that I have list of countries and each country has a list of states/regions. So there are two selects. First to select country, and when country changes I want to trigger binding of the states select. How do you link these two controls to trigger binding of the states select when country changes?
<select id="countries"
data-ng-model="vm.permanentAddress.countryCode"
data-ng-options="country.code for country in vm.form.countries">
</select>
<select data-ng-model="vm.permanentAddress.stateCode"
data-ng-options="state.value for state in vm.getStatesForCountry(vm.permamentAddress.countryCode)">
</select>
UPDATE:
I was probably not explicit in my question as to what I want to do. I do not want to create any new properties that are then watched by angular for a change. I just want to tell anuglar, hey something has changed, go ahead and re-evaluate the binding for this control.
Is it not possible?
In your controller have something like this:
$scope.setStateOptions = function(country){
$scope.stateOptions = /* whatever code you use to get the states */
}
Then your html can be:
<select id="countries"
data-ng-model="vm.permanentAddress.countryCode"
data-ng-options="country.code for country in vm.form.countries"
data-ng-change="setStateOptions(country)">
</select>
<select
data-ng-model="vm.permanentAddress.stateCode"
data-ng-options="state.value for state in stateOptions">
</select>
May be you should use the jquery chanied select plugin:
http://jquery-plugins.net/chained-selects-jquery-plugin
I have used it for 4 select list chained and it worked fine.
Thx
Here is a working example. You just need to use the ng-change to change the model you have set for the states
You can take advantage of the dynamic nature of JavaScript to bind the key from the first list to the second list. Then you only have to set a default value on the change. If you remove the $watch it will still work, the second select will just default to empty when you switch the category.
Here's my data set-up and watch:
app.controller("myController", ['$scope', function($scope) {
$scope.data = ['shapes', 'colors', 'sizes'];
$scope.data.shapes = ['square', 'circle', 'ellipse'];
$scope.data.colors = ['red', 'green', 'blue'];
$scope.data.sizes = ['small', 'medium', 'large'];
$scope.category = 'colors';
$scope.$watch('category', function () {
$scope.item = $scope.data[$scope.category][0];
});
And here's the HTML:
<div ng-app="myApp" ng-controller="myController">
<select id="categories"
data-ng-model="category"
data-ng-options="category for category in data"></select>
<select id="item"
data-ng-model="item"
data-ng-options="item for item in data[category]"></select>
{{category}}: {{item}}</div>
You can, of course, change this to host complex objects and use keys or other identifiers to switch between the lists. The full fiddle is here: http://jsfiddle.net/jeremylikness/8QDNv/