Dropdown in ng-repeat is not working properly - javascript

I am working on a project wer I need to show Questionnaries and Answer dropdown related to that in ng-repeat.
When I check on dropdown I am calling an API to fetch answer information to show it in dropdown.
when I click on 1st dropdown it opens up properly and show all the data.
But when I click on second time on any dropdown it wont open up properly.
Can anyone help me know what is the issue.
Below is the code for it.
<tr ng-repeat="question in questionnaireData track by $index">
<td><span class="" title="{{question.QuestionItem}}">{{question.QuestionItem}}</span></td>
<td>
<div class="">
<!--<label for="answers">Select Answer</label>-->
<select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-click="getAnswersDetails(question)">
<option selected="selected"></option>
<option ng-repeat="answer in answerData[question.MasterDataCategoryId]" value="{{answer.MasterData}}">{{answer.MasterData}}</option>
</select>
<input ng-if="question.MasterDataCategoryId == null" id="{{question.QuestionId}}" ng-model="question.MasterData" type="text" name="question.QuestionId" class="form-control">
<!--<span class="help-inline" ng-show="submitted && formVHD.$valid"></span>-->
</div>
</td>

If you want to create a Dropdown list its better to use ng-option then ng-repeat.
<select ng-option="x.data for x in myItems">
</select>
Because the ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.
Also You have used same ng-model, id for select and input type text I don't think that's a good idea
<input ng-if="question.MasterDataCategoryId == null" id="{{question.QuestionId}}" ng-model="question.MasterData" type="text" name="question.QuestionId" class="form-control">
<select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-click="getAnswersDetails(question)">
In your case your select should look like this and you should use ng-change instead of ng-click.
<select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-change="getAnswersDetails(question)" ng-option="answer.MasterData for answer in answerData[question.MasterDataCategoryId]">
<option selected="selected"></option>
</select>

Related

How to use select inside ng-repeat and keep value selected on api call data

I am using select inside ng-repeat. I am trying to map value coming from my api to select as selected value. I don't know what's wrong going from my side, please correct me.
Here is JSfiddle
HTML code
<div ng-repeat="trip in trips">
{{trip.type}}
<select ng-change="typeChanged(selectedType,trip.id)" id="" name="" ng-model="selectedType">
<option ng-selected="trip.type === t" ng-repeat="t in tripTypes">{{t}}</option>
</select>
</div>
JS code
$scope.trips=[];
$scope.trips=[{id:1,type:'confirmed'},{id:2,type:'cancelled'}];
$scope.tripTypes=['Confirmed','Quotation'];
I was making so silly mistake i guess because after doing below changes my code worked, i changed ng-model to trip.type from selectedType, so only it is possible for ng-selected to check condition.
<div ng-repeat="trip in trips">
{{trip.type}}
<select ng-change="typeChanged(selectedType,trip.id)" id="" name="" ng-model="trip.type">
<option ng-selected="trip.type === t" ng-repeat="t in tripTypes">{{t}}</option>
</select>
</div>
Here is working fiddle Check now

How to add dynamic ng-model value to select option in ng-repeat

I am working on a project wer I need to show a select option in ng-repeat.
As you can see on the above image we have number of select options.
And on select option click I am calling a service which will fetch out the answer data to populate in select option.
My issue is each and every time I click on select option the first select answer will be empty.
Is thr any way that I can store the value of first dropdown and then select other dropdown without effecting other selected values.
<tr ng-repeat="question in questionnaireData track by $index">
<td><span class="showDot">{{question.QuestionItem}}</span></td>
<td>
<div class="" >
<select ng-if="question.MasterDataCategoryId != null"
id="{{question.QuestionId}}"
ng-model="question[$index]" class="form-control"
ng-click="getAnswersDetails(question)">
<option selected="selected"></option>
<option ng-repeat="answer in answerData"
value="{{answer.MasterData}}">
{{answer.MasterData}}
</option>
</select>
<input ng-if="question.MasterDataCategoryId == null"
id="{{question.QuestionId}}"
ng-model="MasterDataCategoryId[$index].QuestionId"
type="text" name="question.QuestionId"
class="form-control">
</div>

How to remove blank from dropdown and required validation working in AngularJS?

I have a dropdown, I'm binding it with owners, but its giving extra blank option. I want to remove the blank option from it. I'm able to do but when I add these changes my required validator does show error.
<md-input-container>
<select name="owner" ng-model="form.owner" ng-options="owner.UserName for owner in owners"
class="input-div" style="height:30px" ng-change="ownerTypeChange()" required ng-disabled="update && view">
<option style="display:none" value=undefined>Select an owner</option>
</select>
<div ng-messages="DataAccessRoleForm.owner.$error">
<div ng-message="required">required</div>
</div>
</md-input-container>
If I remove the below line, then required validator works but dropdown has the blank option.
<option style="display:none" value=undefined>Select an owner</option>
Check if your select has been touched before displaying the required message.
<div ng-if="form.owner.$touched" ng-message="required">required</div>
You can also set the default option to be selected but not selectable once they open the drop down.
<option value="" disabled selected hidden>Select an owner</option>

Show a list of items inside an ng-repeat when an input is selected with model

So, I have this ng-repeat which has a model inside subj.Prerequisites, subj.Prerequisites can contain an array e.g ['SUBJ1', 'SUBJ2']. What i wanted to do is when i click on my input text inside this ng-repeat there will be a shown list of subjects below which allow multiple selection and then with the multiple selected items should be binded to the clicked input text.
<div ng-repeat="subj in sem.subjects track by $index">
<md-input-container flex class="no-error-spacer uk-margin-remove">
<label>Prerequisites</label>
<input type="text" ng-model="subj.Prerequisites" ng-value="(subj.Prerequisites.length <= 0) ? null : subj.Prerequisites" readonly="true">
</md-input-container>
</div>
<select multiple>
<option ng-repeat="sb in subjects" value="sb.subjectCode>{{ sb.subjectCode }}</option>
</select>
Its kind the hard for me though. Please someone help me. Thank you so much!
As per my understanding of your question. Please look into this working plunker :
<div ng-repeat="subj in subjects track by $index">
<label>Prerequisites for {{subj.subjectCode}}</label>
<input type="text" ng-model="multiPre[$index]" ng-click="test($index)">
</div>
<select ng-model="multiPre[selected]" multiple>
<option ng-repeat="sb in subjects[selected].prerequisites">{{sb}}</option>
</select>
https://plnkr.co/edit/2brsDinqAouZ9h6w1taT?p=preview
PS: I have left {{multipre}} intentionally for your understanding of model.
Edit Start :
Try This :
https://plnkr.co/edit/OJm07aLJQTCVgWSGgnZt?p=preview
This addressees to your requirement.

ng-selected true for an option of selectbox, but showing incorrect option tag

I have a selectbox with ng-selected on ng-repeat options.
<div class="imageselectbox">
<select class="form-control" value="selectedItem" ng-model="selectedItem" ng-change="onItemSelected()" kdi-scroll-to kdi-offset-of={{offsetOf}} >
<option ng-repeat="item in items" value="{{item.imageValue}}" data-iconurl="{{item.imageDataURI}}"
ng-selected='{{selectedItem == item.imageValue}}'></option>
</select>
</div>
The DOM shows ng-selected="true" on the correct option tag, but the dropdown shows the first value. Does anybody know the reason?

Categories

Resources