I am trying to pass the value and index of an object to a vue method.
My methods is able to show the value but the index is undefined.
Please advise where I did wrong.
JAVASCRIPT:
<div class="select is-info">
<select #change="change_default_canvas($event.target.value,
$event.target.dataset.index)" id="select_business_model_version">
<option>Select Version</option>
<option v-for="(history,index) in all_business_models_hisotry" :key="index" :value="history.canvas_id" :data-index="index">Date : {{history.date_submitted}}</option>
</select>
</div>
$event.target.dataset.index is outputting undefined
You need to access the selected option element and get the data-index from there. Something like this:
$event.target.options[$event.target.selectedIndex].dataset.index
User selectedIndex (index - 1 actually to skip the first option) instead:
<div id="myComp">
<div class="select is-info">
<select #change="change_default_canvas($event.target.value,
$event.target.selectedIndex)" id="select_business_model_version">
<option>Select Version</option>
<option v-for="(history,index) in all_business_models_hisotry" :key="index" :value="history.canvas_id" :data-index="index">Date : {{history.date_submitted}}</option>
</select>
</div>
</div>
Fiddle: https://jsfiddle.net/7ysa14cf/
Change your #change to the following:
<select #change="change_default_canvas" id="select_business_model_version">
In your change_default_canvas method will look like the following:
change_default_canvas(event) {
console.log(event.target.value)
console.log(event.target.dataset.index)
/* your logic here */
}
Related
I already googled my problem but nothing really helped me.
I need an input field, which also works like a dropdown. So I can write my own data in the input field or select data from the dropdown. I tried with select but then I can only select data and can't write data in the input. That's why I used datalist.
I want to write my data from my array to my datalist like that:
index.html
<input type="text" ng-model="model.person.profession" list="professions"/>
<datalist id="professions">
<option ng-repeat="profession in professions" value="{{profession.id}}">{{profession.name}}</option>
</datalist>
app.js
$scope.professions = [
{'id':1, 'name':'doctor'},
{'id':2, 'name':'farmer'},
{'id':3, 'name':'astronaut'}
];
My data isn't shown in the dropdown. What am I doing wrong?
You can use ng-options for showing the value in drowpdown. Pleae take a look at this fiddle.
<select ng-model="selected">
<option ng-repeat="value in professions" value={{value.id}}>{{value.name}}</option>
</select>
angular.module('myApp', [])
.controller("dataListController", function ($scope){
$scope.professions = [
{'id':1, 'name':'doctor'},
{'id':2, 'name':'farmer'},
{'id':3, 'name':'astronaut'}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
<section ng-controller="dataListController">
<input list="browsers" name="browser">
<datalist id ="browsers">
<option ng-repeat="x1 in professions" value="{{x1.name}}">
</datalist>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
<section ng-controller="dataListController">
<input list="browsers" name="browser">
<datalist id ="browsers">
<option ng-repeat="x1 in professions" value="{{x1.id}}">
</datalist>
</section>
</main>
Add Select element before option . And add track by $indexinside ng-repeat as well. Else for duplicate data, you will get error.
<select>
<option ng-repeat="value in professions track by $index " value="{{value.id}}">{{value.name}}</option>
</select>
or,
<select>
<option ng-repeat="(key, value) in professions " value="{{key.id}}">{{value.name}}</option>
</select>
DEMO: http://jsfiddle.net/HB7LU/28745/
Add ng-value instead of value in options
<option ng-repeat="profession in professions" ng-value="{{profession.id}}">{{profession.name}}</option>
Give your plunkr/code snippet
You can also try using ngOptions like this:
<select class="form-control" ng-model="selectedOption" ng-options="option.name for option in professions track by option.id">
There must be select instead of datalist :
<select>
<option ng-repeat="(key, value) in professions " value="{{id}}">{{value}}</option>
</select>
I have an array- selected_players, which I am looping through in Vue.js, but am not able to set the selected attribute of an option.
What I am trying: :selected="player.round.best_player == 1"
Here is the section of the related template:
<div v-if="selected_players.length && ! loading">
<h4>Select Best Player</h4>
<div class="form-group">
<select name="best-player" id="best-player" v-model="best_player" class="form-control">
<option v-for="player in selected_players" :value="player.id" :selected="player.round.best_player == 1">{{ player.name }}</option>
</select>
</div>
<br />
When loaded, this is the related HTML:
<select name="best-player" id="best-player" class="form-control">
<option value="1">Ashley</option>
</select>
How can I achieve this?
To have a selected option, you can just set the best_player as the one you want to have by default selected.
With below code I am iterating over your player array and finding the player which has round.best_player === 1. The idea is to set the best_player with the selected option.
best_player = player.filter(p => p.round.best_player === 1).id
If I have a bunch of table rows and with select tags in them how would I get the selected value?
If the variable "selected_ingr_action" is the same for every row then when I select an item they all change instead of just the one.
I know I'm missing something.
{{#Ingredients}}
<tr>
<td class="ingr-bid-col"></td>
<td>
<div class="row">
<div class="col-xs-12">
<p class="ingr-name">{{Name}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
{{VendorName}}<br />
<b>pack:</b><span>{{Pack}}</span>
</div>
<div class="col-xs-6" style="padding-bottom:5px;">
<div class="caption">
<b>unit price</b><br />
<span>{{UnitPrice}}</span>
</div>
<div class="caption">
<b>case price</b><br />
<span>{{CasePrice}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<select class="form-control" value="{{selected_ingr_action}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
</div>
</div>
</td>
</tr>
{{/}}
I think perhaps you might be asking a much simpler question about why the rows are sharing the value. If this is the case, the short answer is to use a restricted reference (notice the .):
<select class="form-control" value="{{.selected_ingr_action}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
This causes the selected_ingr_action to be bound to the list item, not the root of the ractive instance.
You can access the result on each item with a wilcard observer:
r.observe('list.*.selected_ingr_action', function(n, o, k, i){
console.log('list index', i, 'changed from', o, 'to', n);
});
Check it out here.
The behavior of defaulting to root, rather than current context, is under consideration to be changed to resolve to the current context.
One option would be to have a separate map of selected values, and use two-way binding to update that map (rather than a single selected_ingr_action property, or a selected_ingr_action property belonging to each item in the list). You can see an example of this approach here - the details are different but the principle is the same.
{{#Ingredients :i}} <!-- note the index reference -->
...
<select class="form-control" value="{{selected_ingr_actions[i]}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
There are to ways to solve this.
First, bind the value of the select into data.
I.e. turn this string:
<select class="form-control" value="selected_ingr_action">
into this:
<select class="form-control" value="{{selected_ingr_action}}">
Assuming that your data structure is something like this:
var Ingredients = [
{
Name: String,
VendorName: String,
UnitPrice: Number,
CasePrice: Number,
selected_ingr_action: String
},
/* other entries */
];
As a second thought, maybe you don't want to store action type inside your data.
I beleive that better approach would be to use so-called Proxy Events with custom arguments and Method Calls.
Here, I add key into your template and when you change your select value, corresponding event handler are called with the index of your row.
Like this:
{{#each Ingredients: key}} <!-- <<< note that key -->
<!-- skip -->
<div class="row">
<div class="col-xs-12">
<select class="form-control" on-change="changeAction(this, key)" value="{{this.selected_ingr_action}}">
<!-- note this too ^^^^^^^^^^^^^^^^^^^^^^ -->
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
</div>
</div>
{{/each}}
Note, into your Ractive component you can introduce method changeAction, which will receive current row (with corresponding Name, VendorName etc. properties) and it's key. Like this:
var ractive = new Ractive({
/* skip */
changeAction: function (ingridient, key) {
// do something with that ingridient
}
/* skip */
});
I am trying to add two select2 multi-value select boxes to my Rails app.
The top form works fine, but the bottom one does not work.
I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing?
Index.html
# This one works fine
<div class="search_genre">Genre:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Popular">
<option value="Alt">Rock</option>
<option value="Ind">Indie</option>
<option value="Ind">Alternative</option>
<option value="Ind">Acoustic</option>
</optgroup>
</select>
</div>
# This one doesn't show a text input or the optiongroup values
<div class="search_region">Region:</div>
<div class="select2-container select2-container-multi populate">
<select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
<optgroup label="Local">
<option value="PDX">Greater Portland</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>
application.js
$("#e9").select2();
You can not have two elements with the same id. Use classes instead.
Both your selects have id="e9" instead try adding something like class="my-select" to your <select> element.
then do $('.my-select').select2();
For each select2 in the same page you must define unique id for tag "data-select2-id".
data-select2-id="Project"
and
data-select2-id="WBSDate"
As #Ramy Mention. I hope its works fine for everyone.
If It won't work then try this.
In select box you can't use same id for an example:
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
If you have same id the search box won't work.
Just try to different Id Name like below.
<select class="form-control select2" id="select">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
<select class="form-control select2" id="select1">
<option>Select</option>
<option>Cycle</option>
<option>Horse</option>
</select>
I faced this kind of problem. That's why i shared here my opinion.
Thanks hope someone will get help from this.
Ok, so it was something fundamental!
The id's were both the same. This seemed odd to me, and was the first thing that I changed to see if it would work. I added a new jquery code to application.js with id #e10 and changed teh second form's id accordingly. Yesterday, this didn't work. However, today it did. I must have missed something silly, like saving the page...
I wish SO allowed you to delete answers.
Using identical data-select2-id property solve the problem.
MVC input helpers throws sytax error for hyphen, replace the hyphen with underscore, and salute.
#Html.ListBoxFor(x => x.WIds, WList, new { #class = "form-control opWflWafers", #multiple = "multiple", data_select2_id=identicalname })
<div class="float-left col-sm-3">
<select class="form-control" id="parentesco" name="parentesco[]" required></select>
</div>
<script>
$('#parentesco*').select2({
placeholder: 'Seleccionar paciente',
ajax: {
url: 'ajax_paciente.php',
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>
I want to display the selected items in a label or list.
I am using switch to switch between form and result. Please see the code below
<div ng-switch on="format">
<div ng-switch-when="form">
<div class="floatLeft">Seeeeeelect</div>
<select multiple="multiple" ng-model="test">
<!--<option value ="sdfsdf" ng-repeat="n in ['a','b','c']">{{n}}</option>-->
<option value ="AAA">AAA</option>
<option value ="BBB">BBB</option>
<option value ="CCC">CCC</option>
</select>
{{test}}
</div>
<div ng-switch-when="result">{{test}}</div>
</div>
<button ng-click="showForm()">Form</button>
<button ng-click="showPreview()">Result</button>
In controller i have the method like below,
$scope.showPreview=function() {
$scope.format='result';
};
$scope.showForm=function() {
$scope.format='form';
};
After selecting the items in list, when i try to switch to see the "result" by tapping "Result" button. The selected item is not populating.
Can anyone tell me where i went wrong.
Thanks
The ng-switch creates sub-scopes. So you have to reference test by $parent.test.
<select multiple="multiple" ng-model="$parent.test">
<div ng-switch-when="result">{{ $parent.test }}</div>
</select>
{{ $parent.test }}
</div>
fiddle