i'm trying to build a select box that trigger show on options of other select in angular way.
the json that i use build select boxs is
[
{"item_id":1,"item":"rubber","type":"x","facility":"school a"},
{"item_id":2,"item":"pen","type":"x","facility":"school b"},
{"item_id":3,"item":"book","type":"y","facility":"school b"},
]
what i need is 3 select boxes, first one shows all unique type. in above json that would be 'x,y'.
when user select one of them, then it should show all unqiue facility values in other selectbox that has same type as selected.
--if user selected x, then it would show school a and school b
when user select facility, a 3rd selectbox show all uiqiue item as label, and item_id as value where facility = selected facility
<select ng-model="selected.type">
<!-- need to show unique types here -->
</select>
<select ng-model="selected.facility">
<option ng-repeat="s in json" ng-if='selected.type == s.type'>{{s.item}}</option>
</select>
<select ng-model="selected.item">
<option ng-repeat="s in json" ng-if='selected.facility == s.facility'>{{s.item}}</option>
</select>
Current solution
currently what i'm doing is that i wrote a filter
.filter('unique', function() {
return function (arr, field) {
var r = [],final=[];
for(i in arr){
if(r.indexOf(arr[i][field]) == -1){
r.push(arr[i][field]);
final.push(arr[i]);
}
}
return final;
};
})
and doing
<select class="form-control" ng-model="nrequest.facility">
<option ng-repeat="s in facility_services |unique:'facility'" value="{{s.facility}}">{{s.facility}}</option>
</select>
<select class="form-control" ng-model="nrequest.item">
<option ng-repeat="s in facility_services" ng-if='s.facility == nrequest.facility'>{{s.item}}</option>
</select>
it works yet i'm not sure if this is correct way to do it angular way, since i'm still learning this new toy i was hoping for some directions on how to achieve this using ngoptions, or other angularjs best practice
Related
I'm trying to update the value in select in Angular 8.
I found that I can use:
$('#selectSeccion').val("SeccionOption");
This select is the next one:
<select name="seccion" class="form-control" id = "selectSeccion">
<option *ngFor="let seccion of seccion" [ngValue]="seccion">{{seccion.seccion}}</option>
</select>
jQuery code is not working when I use the select with Angular, only works when select is normal html like the next one:
<select class="form-control" id = "prueba">
<option value = ""></option>
<option value = "other">other</option>
</select>
How can I update the value on the "ng" select?
I would not recommend using jQuery along with Angular.
you can read more about it here: http://www.learnangularjs.net/using-jquery-with-angular.php
The simplest way
component.html:
<select [(ngModel)]="selectModel" (change)="selectionChange()">
<option [value]="seccion" *ngFor="let seccion of seccions"> {{seccion}}</option>
</select>
component.ts:
selectionChange() {
console.log(this.selectModel)
}
changing the selectModel parameter will trigger the select to change as well.
Based on previous recommendation I can updated using Angular, which always was the best way by the way. No jQuery. I have to change my select to the next one
<select name="seccion" class="form-control" id = "selectSeccion" [(ngModel)]="value" #ctrl="ngModel">
<option *ngFor="let seccion of seccion" >{{seccion.seccion}}</option>
</select>
Adding this on select tag > [(ngModel)]="value" #ctrl="ngModel" and updating the ts file with this lines:
value : string = '';
updatingFunction(){ this.value = "SeccionUpdated"; }
I left it if there someone needs it
I'm displaying two <select> elements. The second <select> is disabled depending on the <option> selected on the first <select>. The problem is when I select an <option> on the first <select>, I want the data shown on the second <select> to be changed. For example, if I select District 1 on the first <select>, I want to see john and mary as options in the second <select>, but if I select District 2, I want josef and charles. Consider that I'm doing this on Laravel and using Vue.
I have done the first part using Vue, disabling the second <select> depending on what has been chosen on the first <select> (only third option on the first <select> will enable the second <select>):
https://jsfiddle.net/vowexafm/122/
Template:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<select #change="treat">
<option value="District1">District 1</option><!--disable 2nd select-->
<option value="District2">District 2</option><!--disable 2nd select-->
<option value="District3">District 3</option><!--enable 2nd select-->
</select>
<br><br>
<select :disabled="isDisabled">
<option>cds 1</option>
<option>cds 2</option>
<option>cds 3</option>
</select>
</div>
Script:
new Vue({
el:'#app',
data: {
isDisabled: true,
},
methods: {
treat: function(e) {
if (e.target.options.selectedIndex == 0 ||
e.target.options.selectedIndex == 1) {
return this.disable();
}
if (e.target.options.selectedIndex != 0 &&
e.target.options.selectedIndex != 1) {
return this.enable();
}
},
enable: function() {
return this.isDisabled = false; // enables second select
},
disable: function() {
return this.isDisabled = true; // disables second select
}
},
});
Now the solution I want,for example: if i'I select District 1 on the first , I want to see john and mary as options in the second , but if I select District 2, I want to see josef and charles on the second .
Populate data object from laravel to have the options for the second select in it and a value for the current selected index from the first select
data: {
secondSelect: [
['john', 'mary'],
['josef', 'charles']
],
currentIndex: 0
}
Define a computed property that returns the values for the second select depending on currentIndex
computed: {
persons () {
return this.secondSelect[parseInt(this.currentIndex)]
}
}
Generate the second select using the computed property persons and use v-model to capture currentIndex.
<div id="app">
<select #change="treat" v-model="selectedIndex">
<option value="0">District 1</option><!--diable-->
<option value="1">District 2</option><!--diable-->
<option value="2">District 3</option><!--unable-->
</select>
<br><br>
<select :disabled="isDisabled">
<option v-for="option in persons" :value="option">{{option}}</option>
</select>
</div>
now the solution I want,for example if i select 'District 1 'on the
first i want to see 'john' and 'mary' as options in the second , but
if I select 'District 2' i want to see 'josef' and 'charles' on the
second .
is that whats in your mind?
new Vue({
el:'#app',
data:{
district:'-1',
options:{
'District1':false,
'District2':false,
'District3':false
},
},
methods:{
getOptions(){
axios.get('https://jsonplaceholder.typicode.com/users',{district:this.district}).then(res=>
this.options[this.district]=res.data)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<select v-model="district" #change="getOptions()">
<option value="-1" selected disabled hidden>choose a district</option>
<option value="District1">District 1</option>
<option value="District2">District 2</option>
<option value="District3">District 3</option>
</select>
<br><br>
<select v-if="options[district]">
<option v-for="option in options[district]">{{option.name}}</option>
</select>
</div>
edit:
after your comment, i edited this answer so now its fetching the data from some api.
to fetch the options from a db, you first have to create an api for your app, and when the request comes out of your vue client side - the server will retrieve rows from the db, do some caculations based on the parameters you sent in the request, and bring back a json data array.
(i wont cover the server side now - thats completely off-topic. but you can easily google for 'laravel json response')
in this snippet, i used some example json api, just to show you how its done on the client side:
i use v-if to cause late- rendering of the second select. it will be rendered only after i get the options, via axios (a very common npm package used to make ajax requests in modern js frameworks).
im also registering an event listener to the change event of the first select - to make my ajax request and populate my options every time the disrict changes (i used a default option to avoid unneeded requests)
Here is my code:
<select label="people" id="ppl" [(ngModel)]="Selectedppl" (ngModelChange)="onPplSelection($event.target.value)">
<option>select people</option>
<option *ngFor="let x of peopleList" [ngValue]="x">
{{x.name}}
</option>
Since people list is an object with name, address, contact. I want to send object as params to ngModelChange with ngValue.
But, once I selected a particular people and saved.I want the dropdown to be changed as the selected people name. Basically, I want to
show the default selected option in dropdown once saved.
Am not using Reactiveforms.
You can have the reference of element and pass its value to function.
<select label="people" id="ppl" #ppl="ngModel"
[(ngModel)]="Selectedppl"
[compareWith]="compareFn"
(ngModelChange)="onPplSelection(ppl.value)">
<option>select people</option>
<option *ngFor="let x of peopleList" [ngValue]="x">
{{x.name}}
</option>
</select>
ts
If you have complex object then you must ue compareFn which help Angular to compare the object to set the default value.
compareFn(a, b) {
if (!a || !b) {
return false;
} else {
return a.name === b.name;
}
}
Working copy is here - https://stackblitz.com/edit/hello-angular-6-2z9f3b
I am creating a select dropdown that can dynamically be added by the user. Clicking a button will execute the following line: "$scope.expenses.push({});" adding a new select dropdown to the page for them to choose from.
This piece is working perfectly fine. But I am running into the issue of the user being able to select the same item in both fields. I have not been able to successfully filter out any other selected values from the dropdown fields. Any pointers would be lovely!
I'm thinking either a custom filter to hide the other selected values or an ng-change function to update the array I am looping over..
Here is my current code:
<div ng-repeat="expense in expenses track by $index">
<label for="itemDescr_{{$index + 1}}">${item_descr}</label>
<select id="itemDescr_{{$index + 1}}" name="itemDescr_{{$index + 1}}" ng-model="expenses[$index].ItemCode" ng-class="{submitted:submitted}" required ng-options="benefit.Code as benefit.Description for benefit in purchDescOptions | removeUsedItemsFilter | orderBy:'Description'">
<option value="">Please select</option>
</select>
</div>
Here is the array ($scope.purchDescOptions) I am looping over:
[
{
Code:"HOU",
Description:"Housewares"
},
{
Code:"ATO",
Description:"Auto Parts, Equipmnt"
},
{
Code:"APP",
Description:"Appliances"
},
{
Code:"CLO",
Description:"Clothing"
}
]
I have 2 drop down lists, which both hold the same list of teams, one to be used as the home team and one as the away team. At the moment the first drop down list works, when a team is selected from the list, it's id and name is output to the page. But when the other drop down is clicked, nothing happens. So for example the output takes the id and team name and outputs them to the textboxes.
Here is an example of each drop down list and the relevant code below, can anyone help me out?
HTML generated for home team list:
<select id="teamList" style="width: 160px;">
<option></option>
<option id="1362174068837" value="1362174068837" class="teamDropDown">Liverpool</option></select>
HTML generated for away team list:
<select id="teamList" style="width: 160px;">
<option></option>
<option id="1362174068837" value="1362174068837" class="teamDropDown">Liverpool</option>
</select>
JADE template used to generate the HTML (used for both lists):
div#teamDropDownDiv
-if(teamsList.length > 0){
select#teamList(style='width: 160px;')
option
-each team in teamsList
option.teamDropDown(id="#{team.key}",value="#{team.key}") #{team.name}
JavaScript for the page:
Team.initTeamsDD = function(){
$("#teamList").change(function(e){
e.preventDefault();
var teamId = $(this).val();
$.get('/show/team/'+teamId, function(response){
if(response.retStatus === 'success'){
var teamData = response.teamData;
$('#teamId').val(teamData.key);
$('#teamName').val(teamData.name);
} else if(response.retStatus === 'failure'){
}
});
});
The two <select> elements both have the same "id" value, which is "teamList". You should never have two elements with the same "id". Because of this, the on-change event handler is getting attached to only one of them. You should change them to "homeTeamList" and "awayTeamList", and then use:
Team.initTeamsDD = function(){
$("#homeTeamList, #awayTeamList").change(function(e){
...