I created the normal select box using ng-options. I have the value property and members array in the object
$scope.currentprop = {
name : "graphFillDirection",
members : [{
name : "ttb",
caption : "Top to Bottom",
}, {
name : "btt",
caption : "Bottom to Top"
}, {
name : "ltr",
caption : "Left to Right"
},{
name : "rtl",
caption : "Right to Left"
}],
value : "ttb"
}
so i created the dropdown values with members.name.and this is my html
<select ng-model="currentprop.value" ng-options="value.name for (key , value) in currentprop.members"></select>
Question
i iterate through members array and i check name with value property. so if members.name is equal to value then i should pass the checked index value to ng-model.
In normal javascript we used to like this currentprop.members.name.indexOf(currentprop.value). so this is what i need to assign to ng-model.
currently i using currentprop.value in ng-model. In this place i should use index value of checked value.
i dont know how to achieve it. please help me. Thanks in advance. Plnkr here
Try ng-selected
<select ng-model="currentprop.value"
ng-options="value.name as value.name for (key,value) in currentprop.members"
ng-selected="{{currentprop.value == value.name}}">
</select>
Working Plunker
If I understand your issue correctly, the problem is with ng-options. I think what you are looking for is this:
ng-options="member.name as member.caption for member in currentprop.members"
<select ng-model="value" ng-options="value.name as value.name for (key,value) in currentprop.members" ng-change=chk(value)></select>
To compare when your select an value
$scope.chk=function(data)
{
console.log(data== $scope.currentprop.value)
}
Try this:
http://plnkr.co/edit/R9zFHhXxTFqHGPgN0n4K
I made some small changes and added an ng-change element that will check whether the selected value equals your defined value.
<select ng-model="currentprop.selected" ng-change="onDropdownChange()" ng-options="value.name as value.name for (key , value) in currentprop.members">
<option value="">Choose one...</option>
</select>
$scope.onDropdownChange = function(){
if ($scope.currentprop.selected === $scope.currentprop.value){
alert("Selected === value");
}
}
Related
I can't do a pre-selection in ng-options from (key,value) pair when value is a array of objects, although if I use value.property then I can do the pre-selection.
I wrote an example in jsfiddle and I'm able to preselect ng-option by key or value.property but in my case I need the whole array
edit
: I edit because [key,value] is [key,Array[Object]] instead of [key,Object]. And I add a new html select code to show right selection based on given answers.
be aware you must pass into ng-model whole set of arrays although the tracking just check array zero. Both structure should be identical.
Updated JSFiddel
HTML
<div ng-app="myApp" ng-controller="demoCtrl">
<select name="first" ng-model="data" ng-options="key as value.templateId for (key, value) in options">
<option value="">Select template</option>
</select>
<div>Data is preselected! = {{data}}</div>
<br>
<select name="second" ng-model="data2" ng-options="value.templateId as key for (key, value) in options">
<option value="">Select template</option>
</select>
<div>Data is preselected! = {{data2}}</div>
<br>
<select name="third" ng-model="data3" ng-options="value as key for (key, value) in options">
<option value="">Select template</option>
</select>
<div>Data is NOT preselected! = {{data3}}</div> :(
<select name="forth" ng-model="data4" ng-options="key for (key, value) in
options track by value[0].templateId">
<option value="">Select template</option>
</select>
<div>Solution! = {{data4}}</div>
Angular
var app = angular.module('myApp', []);
app.controller('demoCtrl', function($scope) {
$scope.data = "for offer";
$scope.data2 = "002";
$scope.data3 = '{ templateId :"001" , color : "yellow"}';
$scope.data = [
{"templateId":3,"color":"blue"},
{"templateId":4,"color":"dark blue"}
];
$scope.options = {
"for offer":
[
{"templateId":1,"color":"yellow"},
{"templateId":2,"color":"dark yellow"}
],
"no offer":
[
{"templateId":3,"color":"blue"},
{"templateId":4,"color":"dark blue"}
],
"general":
[
{"templateId":5,"color":"orange"},
{"templateId":6,"color":"dark orange"}
]
};
});
When using ngOptions you can use track by to determine an unique identifier to bind value properly. Also, the value mustn't be a string, it have to be an object like so:
$scope.data3 = { templateId :"001" , color : "yellow"};
And your template:
<select name="third"
ng-model="data3"
ng-options="value as key for (key, value) in options track by value.templateId">
<option value="">Select template</option>
</select>
Using track by value.templateId will tell ngOptions to look at the property value.templateId when testing the equality of the objects and determine selected value.
Updated your fiddle.
In order to achieve this requirement you have to use track by in ng-select. The track by will help you in binding the select option with a value tag. You should also provide an Unique Id field to track the select option.
<select ng-model="data" ng-options="item.color for item in options track by item.templateId">
</select>
In your controller the options object will be like this
$scope.options = [{ templateId :"001" , color : "yellow"},
{ templateId :"002" , color : "red"} ,
{ templateId :"003" , color : "green"}];
In order to initialize the select option you can set the model by
$scope.data= $scope.options[0];
You can initialize the scope variable only if you use the track by property in select option. In your question the templateId is the unique id
Let my HTML is as follows:
<div ng-repeat="option in options">
<select ng-model="myselect">
<option value="">{{option.attribute_text}}:</option>
<option value="">{{option.attr_value}}-${{option.cost}}</option>
</select>
</div>
I want to get the values of the option selected in the ng-model. Is there any methods to get the values in the ng-model under a ng-repeat?
You have multiple selects and you are giving same model to all of them.
you can't give them same myselect to all of them.
give each option(the ones you are repeating) a name, and use an object's keys for their model.
<div ng-repeat="option in options">
<select ng-model="selections[option.name]">
<option value="">{{option.attribute_text}}:</option>
<option value="">{{option.attr_value}}-${{option.cost}}</option>
</select>
</div>
then you can access them like $scope.selections["some option name you gave earlier"]
if you want to use select you can use ng-select
if you specify ng-model for ng-select it bind the select option to ng-model
you can see it in this jsbin
Have a look at: https://docs.angularjs.org/api/ng/directive/select
Here's an example that should be about right:
Options stored as list of hashes in your controller:
$scope.options = [ { "attribute_text" : "whatever", "data" : { "value" : 9, "cost" : 8 }, { ... } ]
// Selected value
$scope.optionSelected = {};
HTML:
<div>
<select ng-select="option.attribute_text for option in options" ng-model="optionSelected">
</div>
I have this small demo.
Basically , it's a select element with this data :
address: {
select: {
code: "0",
name: "Select proof of address"
},
letter: {
code: "1",
name: "Letter"
},
photograph: {
code: "2",
name: "Photograph"
}
}
And here is the select
<select ng-model="current.addressCode" ng-options="value.code as value.name for (key,value) in student.address"</select>
Questions:
Question #1 - Looking at the Ng doc -
And so , I try to compare
value.code as value.name for (key,value) in student.address
to the second line ( which i find most appropriate)
select as label for (key , value) in object
What is going on here ?
value.code goes to select ???
Html select element has an option tag with value and inside text like :
<option value="volvo">Volvo</option> thats' all.
What did they mean in their docs ?
Question #2
How can I bind this object of myne to a regular sane value,text select ?
(I want the code to be the value and the name to be as text)
Currently I dont see any value in the dom :
You are correct in understanding that example two fits your needs, that is:
select as label for (key , value) in object
Here, as the documentation mentions:
select: The result of this expression will be bound to the model of the
parent <select> element. If not specified, select expression will
default to value.
So, for your use case, your existing code for the select tag is correctly structured:
<select ng-model="current.addressCode" ng-options="value.code as value.name for
(key,value) in student.address"></select>
value.code value is stored in current.addressCode while, in the select dropdown, you should see value.name as the options label.
EDIT: So, to answer your questions:
Question 1
In this case, "select" is just a variable name - a placeholder if you may like for the documentation to explain about it (which it does further below). In your code, the value of the variable that is used instead of select is the one that gets bound to the select's ng-model (In your case, value.code)
Question 2
Exactly as you have mentioned:
<select ng-model="current.addressCode" ng-options="value.code as value.name for
(key,value) in student.address"></select>
This will give you the necessary value, text select tag automatically. When you select an option, the value.code associated with that option gets stored in current.addressCode
http://jsfiddle.net/7FL76/1/
how about this:
it requires simple change :
address: [
{
code: "0",
name: "Select proof of address"
},
{
code: "1",
name: "Letter"
},
{
code: "2",
name: "Photograph"
}
]
the reason is your Key is same as nested Name ( like, letter - Letter ) , so json is a bit redundant.
as result you will see.
value as a code, and text as a name .
I have two types of lists appended to my select element.
a list of users: <option value="domain\davidr" userid="108">David</option>
a list of groups: <option value="Test Group" groupid="10">Test Group</option>
This is my select html:
<select id="groupOwner">
<option value="default" disabled>Select a Group Owner</option>
<optgroup label="---Users---"></optgroup>
</select>
I need to set a variable as either "user" or "group" based on the selected list item type.
I tried doing this: var ownerType = $("#groupOwner[groupid]") ? "group" : "user"; but it keeps returning "group"
Firstly, groupid and userid are not valid attributes for the option element and will render your page invalid. Use data-* attributes instead:
<!-- Example user item -->
<option value="domain\davidr" data-userid="108">David</option>
<!-- Example group item -->
<option value="Test Group" data-groupid="10">Test Group</option>
Secondly, #groupOwner is the select, whereas you need to check the data attribute of the selected option. Try this:
var ownerType = $("#groupOwner option:selected").data('groupid') ? "group" : "user";
Example fiddle
$("selector").get(0).hasAttributes("attributes");
Your selector will always be evaluated to true: if there's no match for your selector, jQuery returns an empty array, which will be evaluated to true in your ternary test.
You should test the length of the array returned by jQuery to determine whether your element is on the DOM or not.
Example :
// Will print No, foo isn't an HTML element present on the DOM
$('foo').length ? console.log('Yes') : console.log('No');
// Will print Yes, $('foo') = []
$('foo') ? console.log('Yes') : console.log('No');
I have to get the selected option data whose option value is known. I have the selected option value and I want the data which is wrapped between the option.
For example in the following select:
<select name="oi_report_contact[sex]" id="oi_report_contact_sex">
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Other</option>
</select>
I have value 1, I need to get the data "Male" through Jquery or Javascript.
Please note : $('#oi_report_contact_sex').val(); will give 1 and not male, when 1 is selected.
You just have to call
var content = $('#oi_report_contact_sex option:selected').html();
to get the inner content of the selected option.
You can use .text() method to get the text value. Like this.
$('#oi_report_contact_sex').on('change', function () {
alert($('#oi_report_contact_sex').val());
alert($('#oi_report_contact_sex option:selected').text());
});
$("#oi_report_contact_sex").find('option:selected').text();
You can try:
$("#oi_report_contact_sex option[value='" + $("#oi_report_contact_sex").val() + "']").text()
jsFiddle link: http://jsfiddle.net/ARBb2/1/