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>
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.
<select ng-if="field.Type == 'multi-select'" name="SpecialFields_{{::field.FieldID}}" id="SpecialFields_{{::field.FieldID}}" ng-model="vmpUserObj.specialfields[field.FieldID]" class="form-control" ng-options="item.OptionID as item.OptionLabel for item in ::field.FieldOptions track by item.OptionID" multiple>
</select>
How can i make multiple options selected in this select field . the ng-model will be ["177", "178", "176"]
I got it, it was my silly mistake.
Here each element in the array is a string rather than a number. so i converted the elements to integer and it worked perfectly (converted using stringarray.map(Number);)
I'm using pug to render some pages for my nodeJS server. In this case I'm trying to use the value captured in the form select in order to change the action method.
So, the idea is use the group name selected to go to that page:
form.w3-container(action="http://localhost:5004/groups/" + (option selected down below) method="GET")
select.form-control(data-toggle='select' class="form-control" data-placeholder='Disabled results')
option group1
option group2
option group3
button.btn.btn-success(type='submit') Go
Any suggestion on how can I do this, if possible without jquery (if it is not possible without I, an explanation on how to "use" it would be very much appreciated).
From what Shoaib said in this post, it should be possible, but I dint't quit understand his suggestion, poor context :/
HTML code:
<form id="myForm" class="w3-container" action="" method="POST">
<select id="mySelector" data-toggle='select' class="form-control" data-placeholder='Disabled results'>
<option value="">Select</option>
<option value="group1">group1</option>
<option value="group2">group2</option>
<option value="group3">group3</option>
</select>
</form>
ECMAscript code:
var selector = document.getElementById("mySelector");
selector.addEventListener("change", function() {
changeAction();
});
function changeAction() {
var finalAction = document.getElementById("myForm").action = "http://localhost:5004/groups/" + selector.value;
}
JSFiddle: https://jsfiddle.net/ytvhqrs0/1/
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.
Here's a very basic HTML question for you:
<form method="get" action="#">
<select id="u" name="u">
<option value="nothing" title=""></option>
<option value="AdamT" title="AT">Adam Temple</option>
<option value="AlexP" title="AP">Alex Potts</option>
</select>
<INPUT TYPE="submit" />
</form>
After submitting the form, the URL ends ?u=AdamT. However, the list has reverted to the blank element.
Is there any way I could make the list be pre-selected with the correct option, without using JavaScript?
Add selected (its a boolean attribute) to the appropriate <option> element in whatever server side language you use to process the form.
Put your javascript at the end of html script or include the .js at the end of the body.
var val = location.href.match(/[?&]u=(.*?)(?:$|&)/)[1]; // get params "u" from URL
document.getElementById("you-selection-id").value = val; // u
Hope this will help:
Use selected for preselected values
<option value="AdamT" title="AT" selected>Adam Temple</option>