I have a table and when clicking on a row I call this function:
$scope.updateRow = function(row) {
$scope.row = angular.copy(row);
}
$scope.row has a name attribute and I have a select menu that should display this name:
<select name="rowName" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
<option value=""></option>
<option ng-repeat="name in names" value="{{name.fullName}}">{{name.fullName}}</option>
</select>
However when clicking the row it sets the option value in the select menu to
<option value="? string:test name ?"></option>
even though $scope.row.name = "test name"
The option value should look like:
<option value="test name">test name</option>
Seems to be a similar issue to this question: Angular adds strange options into select element when setting model value
<select name="rowName" ng-options="name.fullName as name.fullName for name in names" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
Not tested tho, but you can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
And if you would want to add a default option it would look like this:
<select name="rowName" ng-options="name.fullName as name.fullName for name in names" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
<option value="your value"> your text </option>
</select>
Related
I have a stange phenomenon where I'm stuck at the moment as I don't know where the error comes from.
My code is like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">0</option>
<option value="s">24</option>
<option value="d">25</option>
</datalist>
My problem is with displaying the datalist. If I click on the arrow I'm getting only the numbers like here:
After selecting for example '25' I'm getting the value 'd'. That is correct BUT I don't want to display the numbers. Instead I want to display the value of this datalist in this drop-down field.
If I do something like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">DUMMY1</option>
<option value="s">s</option>
<option value="d">d</option>
</datalist>
I'd naturally get the correct display, but I would like to add the ID, so that I can bind the click event with the ID of the selection and not the label.
You can make use of data attribute to find the id of option clicked from the list and keep value as labels,
see below code
$(function(){
$('#selectClassInput').on('change', function(e){
var val = $(this).val();
var id = $('#selectClass').find('option[value="' + val + '"]').data('id');
console.log(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1" data-id="0">DUMMY1</option>
<option value="s" data-id="24">s</option>
<option value="d" data-id="25">d</option>
</datalist>
I have a input type text with datalist that contains duplicate option values
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
<option value="John" data-id="1"></option>
<option value="George" data-id="2"></option>
<option value="John" data-id="3"></option>
</datalist>
What options i have to get the data-id when i select option. For example if i select the the second John to get 3 as id. I just found this:
$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');
but if i chose the second john it returns 1 as id, whitch is incorrect.
You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.
$("datalist option").each(function(){
var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
sameOpt.val(function(i, val){
return val+'-'+(sameOpt.index(this)+2);
});
});
$("datalist option").each(function(){
var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
sameOpt.val(function(i, val){
return val+'-'+(sameOpt.index(this)+2);
});
});
$("#my-input").change(function(){
var v = $("#data-list option[value='"+this.value+"']").attr('data-id');
console.log(v);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
<option value="John" data-id="1"></option>
<option value="George" data-id="2"></option>
<option value="John" data-id="3"></option>
<option value="George" data-id="4"></option>
<option value="John" data-id="5"></option>
</datalist>
I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.
With that said, you could use the label attribute for the names, and have unambiguous values in value:
<option label="John" value="1"></option>
<option label="George" value="2"></option>
<option label="John" value="3"></option>
That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.
i am not getting the default value of my drop down list using angular.js. i am explaining my code below.
<th>
<select style="width:100%; border:none; font-weight:bold;" ng-options="sub.name for sub in noCourse track by sub.value" ng-model="search" ng-change="selectedCourseTable();" >
<option value="">Course Name</option>
</select>
</th>
Here I am fetching the data dynamically and bind them in select tag.The above code generates the following html output.
<select style="width:100%; border:none; font-weight:bold;" ng-options="sub.name for sub in noCourse track by sub.value" ng-model="search" ng-change="selectedCourseTable();" class="ng-valid ng-touched ng-dirty ng-valid-parse">
<option value class selected="selected">Course Name</option>
<option value="Master of computer application" label="Master of computer application">Master of computer application</option>
<option value="Bachelor of Technology" label="Bachelor of Technology">Bachelor of Technology</option>
<option value="Master in Technology" label="Master in Technology">Master in Technology</option>
</select>
subjectController.js:
$scope.selectedCourseTable=function(){
if($scope.search.value=='Bachelor of Technology'){
alert($scope.search.value);
}
if($scope.search.value=='Master in Technology'){
alert($scope.search.value);
}
if($scope.search.value=='Master of computer application'){
alert($scope.search.value);
}
if($scope.search==''){
alert($scope.search.value);
}
}
Here I can not check when i am selecting text as Course Name in ng-change event.Other select option i can check by using this line $scope.search.value but when user is selecting this default text Course Name it can not be check.Please help me to resolve this issue.
Removing the <option value="">Course Name</option> in your template and adding a corresponding default selection in your object list will fix this.
Wherever you set your noCourse:
$scope.noCourse = [{
name :'Course Name',
value: ''
}, /*rest of the values*/];
$scope.search = $scope.noCourse[0];
You would then need to modify the line before to now check the object:
// instead of this:
if ($scope.search == '') {
alert($scope.search.value);
}
// do this
if ($scope.search.value == '') {
alert($scope.search.value);
}
I have html.
<select ng-model="user.role" class="form-control" name="role" >
<option value="">Select Role</option><option ng-repeat="role in roles" value="{{role.authority}}">{{role.authority}}</option> </select>
Now roles is a list and role.authority is string. i want to set default selected if role.authority==MYROLE then set to default, which is in role.authority.
How can i do
You have to assign the same value to select model inside controller, in your case it would be something like this
$scope.user.role = $scope.roles[0].authority
or with use of ngSelected
<option ng-repeat="role in roles" value="{{role.authority}}" ng-selected="role.authority == 'defaultValue'">{{role.authority}}</option>
is there anyway of getting the onchange to work with jquery? Right now i'm using prototype.js. What the onchange does is when either US, CA or GB is selected it shows the state dropdown box for it. basically a show / hide
<SELECT id='country' onchange="HandleStateApearence(this.selectedIndex,
null, $('state_'), $('state_3'), $('state_2'),
null, 1, 2, false)" name=add[country]>
<OPTION value="" selected>-- Select Country --</OPTION>
<OPTION value=US>United States</OPTION>
<OPTION value=CA>Canada</OPTION>
<OPTION value=GB>United Kingdom</OPTION>
</SELECT>
<span id='state_' style="display:none; font-weight:bold;">State:</span>
<SELECT id=state_2 style="DISPLAY: none" name="c_state">
<OPTION value="" selected>-- Select Province --</OPTION>
<OPTION value=AB>Alberta</OPTION>
<OPTION value="BC">British Columbia</OPTION>
</SELECT>
<SELECT id=state_3 style="DISPLAY: none" name="u_state">
<OPTION value="" selected>-- Select State --</OPTION>
<OPTION value=AL>Alabama</OPTION>
<OPTION value=AK>Alaska</OPTION>
<OPTION value=AZ>Arizona</OPTION>
</SELECT>
You haven't shown the definition of HandleStateAppearence(), so I'm not sure what its parameters' expected types are, but in jQuery the $('someselectorhere') function returns a jQuery object that you can treat as if it is an array elements that matched the selector (potentially an empty array, though it won't be in your case). Also, to select an element by ID you use "#", e.g., $('#state_') - jQuery selectors (mostly) follow the syntax of CSS selectors.
So putting those two points together, if your function is expecting direct references to the select elements you need to say $('#state_')[0]:
<SELECT id='country' onchange="HandleStateApearence(this.selectedIndex, null,
$('#state_')[0], $('#state_3')[0], $('#state_2')[0], null, 1, 2, false)"
name=add[country]>
EDIT: Here's a complete jQuery-based method to handle the show/hide of applicable state select elements.
<script>
$(document).ready(function() {
$("#country").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label").hide();
else {
$("#state_label").show();
stateSelect.show();
}
});
});
</script>
<SELECT id='country' name=add[country]>
<OPTION value="" selected>-- Select Country --</OPTION>
<OPTION value=US>United States</OPTION>
<OPTION value=CA>Canada</OPTION>
<OPTION value=GB>United Kingdom</OPTION>
</SELECT>
<span id='state_label' style="display:none; font-weight:bold;">State:</span>
<SELECT id="state_CA" class="state" style="DISPLAY: none" name="c_state">
<OPTION value="" selected>-- Select Province --</OPTION>
<OPTION value=AB>Alberta</OPTION>
<OPTION value="BC">British Columbia</OPTION>
</SELECT>
<SELECT id="state_US" class="state" style="DISPLAY: none" name="u_state">
<OPTION value="" selected>-- Select State --</OPTION>
<OPTION value=AL>Alabama</OPTION>
<OPTION value=AK>Alaska</OPTION>
<OPTION value=AZ>Arizona</OPTION>
</SELECT>
I've removed the inline onchange handler and instead assigned the change handler via jQuery, done inside the document.ready handler so that we can be sure the country element has already been parsed. This is the standard way to assign event handlers.
In your html, I've given each state select element a class of "state" so that we can easily select them all at once to hide them with a single statement.
I've also changed the ID attribute of the select elements to be "state_{countrycode}", e.g., "state_CA", where the codes match exactly with the corresponding values in the country option elements. That way we can reference them in JavaScript by concatenating the currently selected country code to the end of "state_" and if you later add more countries to the list with their own corresponding state drop-down you won't need to change the JavaScript at all. The most important line of code is probably this one:
var stateSelect = $("#state_" + $(this).val());
Which declares a variable stateSelect that will be assigned to a jQuery object containing all elements that match a selector that is an element ID of "state_{currentcountrycode}". Depending on which country option is selected that stateSelect jQuery object will contain exactly 0 or 1 elements, so I then test the length of the object and if it is 0 I hide the state label (I changed its ID too, to be more descriptive), or if the length is 1 I show the state label and the select element.
I'm not well versed with prototype.js, but what it looks like you're doing is passing in elements to your change handler function.
In jQuery, if you're going to be selecting using IDs, you have to prepend the id value with a #.
HandleStateApearence(
this.selectedIndex, null,
$('#state_'), $('#state_3'), $('#state_2'),
null, 1, 2, false
)