<select [(ngModel)]="scheduleComment" class="form-control"
(change)="getSchedCommentsList($event)"
#sched="ngModel">
<option [ngValue]="null">Choose Schedule Comments</option>
<option *ngFor="let scheduleComment of scheduleComments"
[ngValue]="scheduleComment">{{scheduleComment}}</option>
</select>
I've tried using the [(ngModel)] capability to update a field with a new value assigned within a component (separate from the assignment made within the select '*ngFor="let scheduleComment of scheduleComments'" option).
However, the select box value seems impervious to any updates outside the of the initial selection. I've seen other examples using ngChangeForm as well but that doesn't seem to be applicable to this situation, unfortunately.
Can anyone provide an example of how this might be done? That is updating a value independently from the initial value selected.
Thanks
Related
I am running an application where users can select categories for a selected field:
example: user-selected field = 'country' then the user can select 'country names'(India, China, America etc.) in the dropdown.
This works well when categories have unique values less than 15(this may vary). But when users need to select more than 15 categories it becomes very difficult for the user. I wanted to know what are the best possible solutions to ease this process?
example: user-selected field 'city' now users want to select 200 city names from the dropdown.
It can be a box where user can paste comma sepearated category values and we can auto fill these in dropdowns, or a simple file upload.
Please let me know your thoughts.
maybe not make a dropdown but a input field and validate it via options list (like in dropdown but type-to-select) small example:
<input list="id"></input>
<datalist id="id">
<option value="USA"></option>
<option value="GERMANY"></option>
<option value="RUSSIA"></option>
<option value="CHINA"></option>
<option value="FRANCE"></option>
<option value="INDIA"></option>
<option value="UK"></option>
</datalist>
hope this helps =] if you dont know how it works - copy it to any html file to tag and just use on custom page to understand =]
I think the best solution will be to give the user a text box, where the user can paste comma-separated values and we can extract and auto-select the defined values.
I am attempting to create a select in my Angular app based on a classificationsList array from the component. As of now, the view initiates with the first value already "selected", but validation marks it as an invalid response.
If I select the dropdown and choose the other option, it returns valid.
(before selection)
(after selecting)
But when I go back to select "Class 1" it registers as invalid again.
What I'm expecting this to do is have the default, empty option (like below), that disappears once a real option is selected. The difference between these two lists is that the classificationsList is dynamic, whereas the the department list is static.
In fact, I took the html block from the department list and just added the *ngFor piece. Can someone tell me what I'm doing incorrectly, here? The issue isn't strictly with the validation, however. The bigger issue is the fact that it defaults to the first value in the array instead of an empty value like Department. When I put an empty string into the first item of the array from the component side, it selects the empty value like it selects "Class 1" as you've seen.
The validation actually performs fine here, as the empty string is invalid, and the rest of the array items are valid. In this scenario, though, there is an empty string still available in the option.
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList">{{class}}</option>
</select>
</div>
I got it! The functionality I was looking for required me to set a default value (unattached to the array). For this one, I set the default as null like below.
<div class="formBoxRows">
<div><label for="titleClass">Title Classification</label></div>
<select name="titleClass" id="titleClass" ngModel required>
<option *ngFor="let class of classificationsList" [value]=null>{{class}}</option>
</select>
</div>
My issue is that I have an Angular Search app going, (The one from the Lynda.com course) and when I attempt to add multiple selection boxes they are not cumulative. Meaning that when i have, for instance Cervical in the first box selected, and then attempt to choose Muscle in the second one, it un-populates Cervical. What is it that I need to be doing?
<select ng-model="query">
<option value="Cervical">Cervical</option>
<option value="Thoracic">Thoracic</option>
</select>
<select ng-model="query">
<option value="Muscle">Muscle</option>
<option value="Bone">Bone</option>
<option value="Neural">Neural</option>
<option value="Tendon/Ligament">Tendon/Ligament</option>
</select>
If I also need to add in my code for the .js let me know, but that all seems to be running well. Also, this is utilizing a .json file
-T
Thank you for the above answer. Now my follow-up is that when i change them to query-1 and query-2. I then need to adjust the list's ng-show
<ul class="artistlist" ng-show="query">
<li ng-animate="'animate'" class="artist cf" ng-repeat="item in anatomy | filter: query | orderBy: anatomyOrder:direction">
<a href="#/details/{{anatomy.indexOf(item)}}">
<img ng-src="images/{{item.shortname}}_tn.jpg" alt="Photo of {{item.name}}">
<div class="info">
<h2>{{item.name}}</h2>
<h3>{{item.type}}</h3>
</div>
</a>
</li>
</ul>
However, if I just add a 2nd ng-show="query-2", then what occurs is that the functionality is lost, and the two items i currently have in the JSON file will show up if I have either Thoracic or Cervical selected when they should only show during Cervical.
If I add a completely second UL with its own unique query-2, then by choosing Cervical & Muscle I have two seperate lists appearing instead of a slimming down of the one list that I want.
Thanks for the help
-T
You are using same model for both fields , so one changes, the other also changes but since that value is not in its options so it will show no value
assign different model values like ng-model="query1" and ng-model="query-2"
I created a fiddle for you. Kindly update this and let me know if you want more
https://jsbin.com/buhexo/edit?html,js,output
You have both select boxes bound to the same model. Angular two way data binding is updating both at the same time. However, since you do not have the same options in both lists the first select will "unselect".
Provide a unique name for each model.
You share the model, and since there is 2 way binding when you update the model (i.e. query) all of its references will update as well (i.e. all the select boxes). You need to come up with a scheme where you don't share the model and you keep the first value.
So change to ng-model="query1" and ng-model="query2", then in your controller you will decide how to handle the search parameters.
I hope there's a way to achieve this.
I am creating dropdowns using ng-repeat; the number of dropdowns created depends on the data I retrieve from the database.
Depending on the data,I'd like to set an initial option value for each dropdown.
Consider the following code:
<span class="finds" ng-model="cond" ng-repeat="condin list">
<select ng-model="selected_item" ng-options="condition.name for condition in conditionTypes"></select>
<input ng-model="cond.name"/>
</span>
I can change the values of the dropdown by changing the selected_item value but this changes the value of all dropdowns (because the variable is binded).
So is it possible for me to change the value of each dropdown independently without affecting other dropdowns(without creating multiple variables as well)?
Thank you
If you want your right drop-down to be filled with appropriate data according to the value in your first select box you should be doing something like this.
Suppose you have two drop-down list like;
<select ng-model="first" class="form-control" ng-change="secondcall()">
<option ng-repeat = "firstdata in firstdatas" value="{{firstdata}}">{{firstdata}}</option>
</select>
<select ng-model="second" class="form-control">
<option ng-repeat = "seconddata in seconddatas" value="{{seconddata}}">{{seconddata}}</option>
</select>
In your controller;
$scope.secondcall = function () {
var value = $scope.first;
//Make an API call to fetch details with the select value and in the success do this
$scope.seconddatas = data from the api;
};
There's only one ng-repeat and that is used to create a set of dropdowns.
I need to retrieve the data from the database and depending on the data I can then define how many dropdowns I will need.
the ng-repeat does that. if, after processing the data I need 2 dropdowns then I'll create two pairs inside the loop
dropdown1 dropdwon1.0 {1.0 should load list depending on the option chosen in 1
dropdown2 dropdown2.0 {2.0 should load list depending on the option chosen in 2
What I want is that the text box is only accessible if a certain option is picked from the drop down menu and i have a html form as below:
<tr>
<td>a. Did any of your staff participate in training or orientation sessions related to any aspect of social performance management, during the reporting year?
<td >
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option>Yes</option>
<option>No</option>
<option>No, but planning in future</option>
</select>
<p>if not,and not planning please explain why not?</p>
<input type="text" name="mfi_4_a_ii" class="init" disabled="disabled"/>
</tr>
Now when the option No, but planning in future is selected then the textbox must be enabled.This type of dropdown menu has been used many times in this form so i have to enable the textbox in another similar case too so how a single function can be written to do this.Help me out guys.
First of all, you should close your td's by adding a </td> to the end of the contents. That way browsers will have less trouble finding the right element if you use javascript.
Also, you will need to add values to your options, so that a form handler knows which has been picked. You could use something like:
<select name="mfi_4_a_i">
<option>Please choose one.</option>
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="later">No, but planning in future</option>
</select>
You can leave the first one blank because they have to pick something else anyway.
About the textbox, you have to use javascript for this. Do you happen to use jQuery? That would make it easier to handle these things, especially if you re-use it a lot. It can also be done in regular javascript but I'm not sure about the code for it. Here's the solution in jQuery:
$('select').change(function(){
$input = $(this).parent().find('input');
if($(this).attr('value') == 'later') {
$input.removeAttr('disabled');
$input.focus();
} else {
$input.attr('disabled','true');
}
});
What this does: everytime a select dropdown changes values (something has been picked) it checks whether the option with value later was picked (maybe 'specify' would be more appropriate..). If that's true, it finds the first textbox that's inside the same element as the select. In this case both are at the same level in a td, if your html gets more complicated maybe you have to find another way to look for the nearest textbox.
If the input is found, it is set to enabled and the cursor is placed inside so they can start typing immediately.
If another option than 'later' is picked, the textbox is disabled again.