why option html element is not binded inside select in case 1?
Case 1: not work
#base{
<select name="" value="" class="custom-select">
#{
println("1"); // this is printed to console
<option value="test">i</option> // this is not shown in html
println("2"); // this is printed to console
}
</select>
}
Case 2: work
#base{
<select name="" value="" class="custom-select">
#{
println("1"); // this is printed to console
<option value="test">i</option> // this is shown in html
}
</select>
}
Update:
How one can create a loop which binds all option elements to scala template? Following code does not bind any option elements. What is actually return type? Empty line?
<select name="" value="" class="custom-select">
#{
for(i <- 1 to 10) {
<option value="#i">#i</option>
}
}
</select>
The code block #{...} is a closure that has an inferred return type from the last statement.
In the first case the return type is inferred to be Unit since the println(...) returns Unit
In the second block the html is returned.
I can't speak to the first question directly, but assuming that #korefn and #om-nom-nom are correct; that the block is a closure and is interpreting the return as a void.
In response to your update, I would try:
#for(i <- 1 to 10) {
<option value="#i">#i</option>
}
which is how I've used it in the past. I've also found it helpful to use a nested #if block to handle the selected option differently so that it is selected on loading the document.
Related
Sorry for the beginner question, I am new to Vue.js. I am using CoreUI. Documentation/Tutorials on CoreUI+Vue are scarce.
I am using the <CForm> tag and here I have a <CSelect> tag.
<CForm #submit="test" ref="form">
<CSelect
label="Pick a name"
:options="['test', 'test1', 'test2']"
v-model="testy"
/>
<CButton type="submit" size="sm" color="primary"> Submit</CButton>
</CForm>
JavaScript:
methods: {
test(e) {
console.log("test");
debugger;
e.preventDefault();
}
}
When my breakpoint is hit and I inspect this.testy it will not return the value of the select box but instead this:
I was under the impression that putting v-model on my CSelect will expose my select box under this.* and I could somehow easily get the value (?!).
For context this is rendered in the DOM:
<select id="uid-wvkj98yh6gp" class="form-control">
<option data-key="0" value="test"> test </option>
<option data-key="1" value="test1"> test1 </option>
<option data-key="2" value="test2"> test2 </option>
</select>
My question: inside my test(e) method, how can I gather the current selected value of my select box?
In the <CSelect> API docs, it lists the value prop:
value
The value of select input. Set .sync modifier to track prop changes.
It seems they don't use v-model as expected and you probably also got an error about the value prop being incorrect.
Change your select to:
<CSelect
label="Pick a name"
:options="['test', 'test1', 'test2']"
:value.sync="testy"
/>
This way you use the .sync modifier the way the guide directs.
I am using drop down list and want to display its value on next page but it is displaying id instead of it's name if I write code like below and if I take both
in value means value="{{operator.id}}{{operator.operators_name}}" then it is printing output like this 1xyz but I want only xyz to display and 1 for passing another java script function
<select class="form-control" id="sel1" name="oprator" data-live-search="true" onchange="getOprInfo(this.value)" >
<option value="">Select Operator</option>
{%for operator in operators%}
<option value="{{operator.id}}">{{operator}}</option>
{%endfor%}
</select>
getOprInfo(value)
{
setData("value", value);
}
can you used next page
var value = getData("value");
I have an app angular that can be translate both in french and english. I'm using angular translate to do that. The problem is: I receive an array of object from an API and in those object, I have a property bookConditionEn and a property bookConditionFr and other like ids.
In a select input , I want to display bookCondition depending by the current language.
In the controller, I can get the current language with the $translate service
vm.getCurrentLanguage = function() {
return $translate.use();
}
So, I wonder if in the view I could use a condition in the ng-option.
<select
ng-options="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-model="bookCtrl.bookConditions"
name="Condition" class="form-control"
></select>
You can use conditionals to show/hide options by changing the way you are creating the <select>:
<select ng-options=ng-model="bookCtrl.bookConditions" name="Condition" class="form-control">
<option
ng-repeat="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-if="vm.getCurrentLanguage==bookCondition.language"
>
</select>
I didn't quite understand how you have your JSON set up so I am assuming you have a property that contains the language (bookCondition.language). You can compare this against the user's currently-selected language which is returned by your vm.getCurrentLanguage. By the way, I suggest changing that from a function to just be a variable like this:
vm.currentLanguage = $translate.use();
This should be all you need to do to specify options in a conditional manner.
It worked your way
<select ng-model="bookCtrl.bookCondition" name="Condition" class="form-control">
<option ng-if="bookCtrl.getCurrentLanguage() === 'en'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookCondition}}</option>
<option ng-if="bookCtrl.getCurrentLanguage() === 'fr'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookConditionFr}}</option>
</select>
recently I have been trying to effectively parse values to a <selection> tag. For example, I have been trying:
/index.html?exampleId=examplevalue
Yet, this doesn't seem to be working. For added context, here is an example that replicates the structure of my <selection> tag:
<form method="GET">
<select id="CategorySelect" name="CategorySelect">
<option value="default">Select an Option</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
<option value="otheranimals">Other animals</option>
</select>
</form>
If I understand your question correctly, you're trying to pre-fill form inputs based on the query string of the URL.
If so, first you need to parse the query String.
In this example I assign the result of an Immediately Invoked Function Expression to a variable named $_GET (after the variable with the same in PHP used to store the same information).
Inside the IIFE I split the query string by all occurences of ? or &, then loop through the results and split any non-falsey items by =. I assign the results of the final split to an object.
Finally return that object to the $_GET variable.
var $_GET = (function(s,o,a) {
return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
// split the query by ? or &; iterate the results; split each item by =; assign the result; return the object
})(location.search,{},[]);
Next you need to find elements with the correct names and set the values. So iterate the query object we just made; find all elements that have the correct name; iterate the elements' test the elements tag names so we know how to properly set the value.
This method will work even if there are multiple forms with similar elements on the same page.
// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
// Loop through the nodelist
for(var i in Object.keys(nodelist)) (function(el){
// If the element is an input element, set it's value
if(/input/i.test(el.tagName)) el.value = value;
// If the element is a select element, set the default option
if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
})(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);
Expand and run the following demo to see it in action.
var $_GET = (function(s,o,a) {
return s.split(/\?|\&/g).forEach(function(i){i&&(a = i.split('='))&&(o[a[0]] = a[1]);}), o;
// split the query by ? or &; split each item by =; assign the result; return the object
})("?fruit=banana&greeting=evening",{},[]);
// ^^ For demo purposes only, use location.search instead.
// Loop through $_GET; Get a list of all nodes, and the value to set
for(var i in $_GET) (function(nodelist, value){
// Loop through the nodelist
for(var i in Object.keys(nodelist)) (function(el){
// If the element is an input element, set it's value
if(/input/i.test(el.tagName)) el.value = value;
// If the element is a select element, set the default option
if(/select/i.test(el.tagName)) el.querySelector('[value="'+value+'"]').selected = true;
})(nodelist[i]);
})(document.querySelectorAll('[name="'+i+'"]'), $_GET[i]);
<form>
<select name="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<select name="greeting">
<option value="morning">Good Morning</option>
<option value="afternoon">Good Afternoon</option>
<option value="evening">Good Evening</option>
</select>
</form>
<form>
<select name="fruit">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
<select name="greeting">
<option value="morning">Good Morning</option>
<option value="afternoon">Good Afternoon</option>
<option value="evening">Good Evening</option>
</select>
</form>
If you submit the form you will receive the values in $_GET (or $_POST depending on form method)
<?php
if(isset($_GET['CategorySelect'])){ // test if you have submitted something
echo $_GET['CategorySelect'];
}
?>
<form method="GET">
<select id="CategorySelect" name="CategorySelect">
<option value="">Select an Option</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
<option value="otheranimals">Other animals</option>
</select>
<input type="submit" value="submit"><!-- to be able to submit your form -->
</form>
I'm working with a chosen select, i added a function call when the event ng-click happens, but it's not doing anything, when i make the call to the same function in a button it works, why is this?
ng-change doesn't work either, even worse, it eats my options and leaves only the first one.
my select code:
<select ng-model="ind_oferta" multiple class="control-group chosen-select" chosen >
<optgroup label="Oferta">
<option value=""> </option>
<option ng-click="aplicarFiltro()" ng-repeat="menuOpcion in menu[0].opciones.oferta" value={{menuOpcion.id}}>
{{menuOpcion.tipo}}</option>
</optgroup>
</select>
the function is very simple, it's just a javascript alert
$scope.aplicarFiltro = function(){
alert("hello");
}
and i think is not worth put the button code, that one works so...
EDIT: i changed the select code to this, still not making the call to the function, help!
<select multiple class="control-group chosen-select" chosen style="width:250px;"
ng-model="ind_oferta" ng-click="aplicarFiltro();"
ng-options="menuOpcion.id as menuOpcion.tipo for menuOpcion in menu[0].opciones.oferta">
<option>--</option>
</select>
You should use the ng-options directive together with ng-model (you can still add a single <option> as the default value). It would probably look something like this:
<select ng-options="menuOpcion.tipo for menuOpcion in menu[0].opciones.oferta"
ng-model="selected"
ng-change="aplicarFiltro()" chosen multiple>
<option value=""></option>
</select>
There is a lot of customization options, so it is best if you check out the documentation.
To get the option which was removed by the user you could do something like this in your controller:
var previousSelection = [];
$scope.changedSelection = function () {
// Check if the current selection contains every element of the previous selection
for (var i = 0; i < previousSelection.length; i++) {
if ($scope.selectModel.indexOf(previousSelection[i]) == -1) {
// previousSelection[i] was deselected
}
}
// Set the previous selection to the current selection
previousSelection = $scope.selectModel;
}