<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);)
Related
I am making a form to create new products and there is a dropdown that has the default value of "Others" and it shows others
<InputSelect class="form-control" #bind-Value="newproduct.P_Category">
<option value="Others">Others</option>
#foreach (var category in Categories)
{
<option value="#category.Name">#category.Name</option>
}
</InputSelect>
<ValidationMessage For="#(() => newproduct.P_Category)" />
At the start
When I try to submit without changing the value in the inputselect there is an error.
Submitting without changing value
So is there a way for it to submit without needing to change it? Like it would act as a default value.
Submitting after selecting another value and selecting back others
Using Blazor Webassembly App inside a razor file
Edit:
I know this can be easily fixed just by having an empty default value
<InputSelect class="form-control" #bind-Value="newproduct.P_Category">
<option value="">Select</option>
#foreach (var category in Categories)
{
<option value="#category.Name">#category.Name</option>
}
</InputSelect>
<ValidationMessage For="#(() => newproduct.P_Category)" />
But is there any way to just submit the default value without needing to select another option and selecting back the original option?
Edit 2:
This is under an EditForm class
I think what is missing is the selected attribute for the option markup. When you select a value, it puts a selected to identify it. Just add the selected to the Default option.
< option value="Others" selected>Others
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 have a <select> element in my html page. The <option>s are given through a loop. The selected value is stored using a ng-model. This data is now push to a database. The next time that page reloads I would like the the <select> field to hold the previously selected option. Is there anyway to do it?
I have seen that ng-model generally fills text fields on it own. I tried to do the same with <select>-<option> but it doesn't work
<select ng-model="option">
<option value = "" disabled selected>---Choose an Option--</option>
<option ng-repeat = "x in option" value="x">{{x}}</option>
</select>
When selecting from an array of primitives, use the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.options=["hello","world",1,2,3];
//set previously selected option
$scope.option = "world";
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="option" ng-options="item for item in options">
<option value = "">---Choose an Option--</option>
</select>
<br>selected={{option}}
<body>
One can select using ng-repeat with an array of objects, but not with an array of primitives. Under the hood, the <select> directive annotates each option with tracking information. It can't annotate primitives.
For more information, see
AngularJS <select> Directive API Reference - Choosing between ng-repeat and ng-options
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>
I am new in angularjs. Currently I am working on select box in angularjs. I need to show select box with database values and with default selected values.For me values are coming in drop down but initial selection is not working.
Here is my code Any answer or suggestions is highly appreciated
html
<body ng-controller='CompositionController'>
<input type="hidden" name="selectedRegion" id="selectedRegion" value="14" />
<label class="popupboxtext">Select Substrate</label>
<select class="popupselect" ng-options="sb.SUBSTRATE_ID as sb.SUBSTRATE_NAME for sb in Substrate" ng-model="selectedSubstrate" >
<option value="" >Select Substrate</option>
</select><br/>
<label class="popupboxtext">Coating Side 1</label>
<select class="popupselect" ng-options="CS1.COATING_ID as CS1.COATING_NAME for CS1 in CoatingS1" ng-model='selectedCoatingS1'>
<option value="" >Select Coating</option>
</select>
</body>
js file
$scope.selectedCoatingS1 = invalue;
here this 'invalue' I am fetching from database. Here i am having the problem
$scope.selectedCoatingS1 = '29';
Here is the link you can check this for further details
http://54.148.151.90/test
if i am giving direct value with cots then its working perfectly but with database value its not working . Any suggestions are highly appreciated
Thank you
In angular the select controls works with objects so instead of setting a string ('29') to the scope... try setting the whole object, something like:
$scope.selectedCoatingS1=$scope.CoatingS1[0];
Where defaultCoat should be something like:
{
COATING_ID:'someId',
COATING_PROR1:'some property,
...
}