I´m using filters in Angular JS, however, the list that is displayed in the filter shows the value like this:
[{"text":"IVA"}{"text":"IVAT0"}]
This is the <DIV> where I´m doing the filter:
<div class="form-group col-md-6">
<label>
IMPUESTOS
</label>
<select ng-model="articulo.impuestos_compra" name="impuestos_compra" class="form-control input-lg" required>
<option value="#{{ impuestos_compra }}">#{{ impuestos_compra }}</option>
</select>
</div>
And, this is my try to iterate this array:
$scope.impuestos_venta = #json($impuestos_venta);
impuestos_compra = ['IVA' , 'IVAT0' ];
impuestos_compra.forEach(function(impuestos_compra) {
console.log(impuestos_compra);
});
I want the filter to show both options separately, so the use can select either IVA or IVAT0.
Can you help me please? using the <option> tag is not an option, I was asked to bring the values from the database.
Thank you.
If I understand your situation right, then you need ngRepeat to iterate over your options in the HTML, and then pass the data in the option
// This is your array
impuestos_compra = ['IVA' , 'IVAT0' ];
How to use in the View now:
// iterate over the impuestos_compra and then pass it to the option
<select ng-repeat="item in impuestos_compra" class="form-control input-lg" required>
<option value="item">{{ item }}</option>
</select>
you are looking for the ng-options attribute
Related
I have a product which has a category, and while editing product I would like to display current category in dropdown ofcourse. And if user wants to change category in dropdown it is ok, but on load I would like to show selected current product's value.
Here is my html
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Products category:</label>
<div class="col-xs-9">
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [value]="helperService.IsItEmptyGuid()" [selected]="isDefaultSelected()">-/-</option>
<option [value]="group.id" *ngFor="let group of mainGroups" [selected]="group.id==='a0e25215-a60e-4444-b6ac-4521b7de4b37'">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
When I run my app and open this form, as you can see I put {{article.mainGroup.id}} <- it's binded article to check is there id of category, and when I open form it looks like this:
So obliviously {{article.mainGroup.id}} holds a value, but I can not force <select> to display that value as selected...
Any help would be awesome, thanks a lot !
EDIT:
It's doing nothing, just selecting -/- if product has no group because then article.mainGroup.id would be empty guid..
isDefaultSelected() {
return this._globalHelperService.isEmptyGuid(this.article.mainGroup.id);
}
EDIT 2: By following Pranay Rana example, here is what I did :
1.) Select article
2.) Open modal
3.) Image when modal is opened:
As you can see, value is there, but nothing is selected in a modal.
Here is original code, not only img:
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Group:</label>
<div class="col-xs-9">
<select touch-enter-directive [ref]="ref" [nextFocusElement]="articleSubGroup" id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.mainGroup.id">
<option [ngValue]="null">-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
Probably select2 is making an issue?
Thanks
do like this
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [ngValue]="null" >-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
In angular [select] is not needed it will select option based on id value you pass as [(ngModel)] to select element,also no need of emptyguid if your value is null then default option will get selected
In the past I was able to pass out the 'object' that was used for the select options. I'd like to capture that information off a regular select, but I cannot remember how.
So When you do an *ngFor in your select option, you specify a N of N's like this
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
I'm hoping I can get that 'whole' thing that was selected, by calling a function on change.
<select class="form-control input-sm "
(change)="changeThing($event)"
name="thing"
formControlName="thing" >
<option *ngFor="let thing of things" value= {{thing.name}}>
{{thing.family}} - {{thing.name}}
</option>
</select>
because I want to change some form options based on the 'family' of the thing, not the value that gets passed.
my function looks like this.
changeThing (thing) {
console.log('thing:', thing);
selectedFamily = ??;
}
The $event is probably the wrong thing to be looking at - I can get the value selected there, but I cannot find the whole "thing" that was selected.
Thanks for any help.
You can do that with the help of index
Template Side :
<select class="form-control input-sm "
[(ngModel)]="selectedValue"
(change)="changeThing($event.target.value)"
name="thing" >
<option *ngFor="let thing of things; let i = index;" [value]="i">
{{thing.family}} - {{thing.name}}
</option>
</select>
Component Side :
changeThing(index){
alert(this.things[index].family +' '+this.things[index].name );
console.log(this.things[index]);
}
WORKING DEMO
I hope it will help
<option *ngFor="let thing of things" value= {{thing}}>
{{thing.family}} - {{thing.name}}
</option>
You can use ngModel with ngModelChange
<select [(ngModel)] ="selectedType" (ngModelChange)="changeThing(selectedType)">
<option *ngFor="let thing of things" [ngValue]="thing ">
{{type.name}}
</option>
</select>
I have an array- selected_players, which I am looping through in Vue.js, but am not able to set the selected attribute of an option.
What I am trying: :selected="player.round.best_player == 1"
Here is the section of the related template:
<div v-if="selected_players.length && ! loading">
<h4>Select Best Player</h4>
<div class="form-group">
<select name="best-player" id="best-player" v-model="best_player" class="form-control">
<option v-for="player in selected_players" :value="player.id" :selected="player.round.best_player == 1">{{ player.name }}</option>
</select>
</div>
<br />
When loaded, this is the related HTML:
<select name="best-player" id="best-player" class="form-control">
<option value="1">Ashley</option>
</select>
How can I achieve this?
To have a selected option, you can just set the best_player as the one you want to have by default selected.
With below code I am iterating over your player array and finding the player which has round.best_player === 1. The idea is to set the best_player with the selected option.
best_player = player.filter(p => p.round.best_player === 1).id
I tried using ng-change on select but the problem is, I need to send ticket.id to the method but, ticket.name to model.
<select name="ticketAttendeeMapping"
ng-model="attendee.ticketTypeName"
class="form-control">
<option ng-repeat="ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)"
ng-value="ticket.name"
ng-click="onAttendeeTicketmapping(ticket.id, $parent.$index)">
{{ticket.name}}
</option>
</select>
I also tried doing this:
<select name="ticketAttendeeMapping"
ng-model="attendee.ticketTypeName" class="form-control"
ng-options="ticket.name as ticket.name for ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)"
ng-change="onAttendeeTicketmapping(ticket.id, $index)">
<option value="" disabled>Choose Your Ticket</option>
</select>
The easiest way is to just use the object in the model:
<select name="ticketAttendeeMapping" ng-model="attendee.ticket" class="form-control" ng-options="ticket.name for ticket in inTransitionTickets" ng-change="change(attendee.ticket.id)">
</select>
Then you can access the name by using $scope.attendee.ticket.name and you can access the id by using $scope.attendee.ticket.id
Plunkr
try to do this:
<select name="ticketAttendeeMapping" ng-model="attendee.ticketTypeName" class="form-control" ng-options="ticket.name as ticket for ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)" ng-change="onAttendeeTicketmapping(attendee.ticketTypeName, $index)">
<option value="" disabled>Choose Your Ticket</option>
</select>
now you will get ticket i.e."attendee.ticketTypeName" object in ur ng-change method. where u can get its "id"
I am not sure, If what I have done here is what was originally asked by OP.
We can't use ng-options here simply!!
because while we use "ng-options" it restricts our access to current selected Json element to the properties explicitly mentioned in ng-options, on the contrary ng-repeat gives you complete access to current Object.
<select name="ticketAttendeeMapping"
ng-model="SelectedTicketNameFromngModel"
class="form-control">
<option ng-repeat="ticket in ticketJson "
ng-value="ticket.name"
ng-click="alertMe(ticket.id)">
{{ticket.name}}
</option>
</select>
$scope.SelectedTicketNameFromngModel = '';
$scope.selectTicketIdFromMethod = '';
$scope.ticketJson = [{'name':'tick1','id':'t1'},{'name':'tick2','id':'t2'},{'name':'tick3','id':'t3'}];
$scope.alertMe = function(tId){
$scope.selectTicketIdFromMethod = tId;
}
http://jsfiddle.net/HB7LU/16124/
I am having a dynamic list of data which i am showing by dropdownlist.
But i want one those to be selected when the user enters the page.
<div class="row">
<div class="col">
<select ng-model="item1" style="width:100%;text-align:center;">
<option style="text-indent:30%" ng-repeat="item1 in IdeaMonthList" value="{{item1}}" >{{item1}}</option>
</select>
</div>
</div>
This is how i am making the dropdown list.
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
This is my array of months.By deafult when the user enters this page the current month should be selected in dropdownlist.
Using we can choose the option for static option.
How to do it for Dynamic options
Use ngOptions in angularjs.
The ngOptions attribute can be used to dynamically generate a list of
elements for the element using the array or object
obtained by evaluating the ngOptions comprehension expression.
<select ng-model="item1" ng-options="item for item in IdeaMonthList" style="width:100%;text-align:center;"></select>
Try this:
<div class="row">
<div class="col">
<select ng-model="item1" style="width:100%;text-align:center;">
<option style="text-indent:30%" ng-repeat="item in IdeaMonthList" value="{{item}}" >{{item}}</option>
</select>
</div>
</div>
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
$scope.item1 =$scope.IdeaMonthList[new Date().getMonth()];
<div class="row">
<div class="col">
<select ng-model="item1" style="width:50%;text-align:center;" ng-options="item for item in IdeaMonthList">
</select>
</div>
</div>
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
$scope.item1 =$scope.IdeaMonthList[new Date().getMonth()];
Plunker -- http://plnkr.co/edit/8dZXycSTYhQOog12FpEK?p=preview
I think change your ng-model name
<select ng-model="selected" style="width:100%;text-align:center;">
And your JS File:
$scope.selected =$scope.IdeaMonthList[new Date().getMonth()];