Develop Reference

How to select value in dropdown based on objects property value - select and angular

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

Using select2 Dropdown value is not binded to my article - Angular

I'm trying to bind selected value in dropdown to my article which has property of same type as dropdowns source is. But somehow when I console log my article there is no value in my property which should hold an selected dropdown value.
Here is my code:
In typescript I have :
article: Article;
mainGroups: Group[];
subGroups: Group[];
On init I'm filling mainGroups and subGroups with data, like this:
ngOnInit() {
this._groupService.getAll().subscribe(groups => this.mainGroups = groups);
this._groupService.getAllSubGroups().subscribe(subgroups => this.subGroups = subgroups);
}
Later in html I'm looping values from my mainGroups and subGroups like this:
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Main group:</label>
<div class="col-xs-9">
<select class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="articleGroups" required [(ngModel)]="article.mainGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="group" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
</div>
</div>
<!--Sub group-->
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Sub group:</label>
<div class="col-xs-9">
<select class="form-control dash-form-control select2" style="width: 100%;" name="subGroup" required [(ngModel)]="article.subGroup">
<option disabled [ngValue]="null">-/-</option>
<option [ngValue]="subgroup" *ngFor="let subgroup of subGroups">{{subgroup.title}}</option>
</select>
</div>
</div>
As you can see guys I also wrote : [(ngModel)]="article.mainGroup" on first dropdown, and I said also: [ngValue]="group" *ngFor="let group of mainGroups"
So basically this [ngValue]="group" should get value out of *ngFor and store it into article.mainGroup?
But when I do an console log I can not see article.mainGroup property at all, even if it's defined there in article.ts model.. so that means article.mainGroup property is empty ( because is not visible in console.log(article)?

I guess you need something like this:
<select class="form-control" [(ngModel)]="size" name="sizeValue" #sizeValue="ngModel">
<option *ngFor="let size of sizes" [value]="size">{{size}}</option>
</select>
Note the #sizeValue="ngModel"
See my original answer here:
https://stackoverflow.com/a/46866804/1546042

How can I update my Object with selected inputs in ng-repeat?

I have code like this
{"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]}
<div ng-model="item" ng-repeat="product in xyz">
<div>{product.a}</div>
<div>
<select>
<option ng-repeat="value in pqr">{{value}}</option>
</select>
</div>
<div>
<select>
<option ng-repeat="number in abc">{{number}}</option>
</select>
</div>
</div>
I want to update my object on changing the values in dropdowns and update the onject "xyz"!

try like this.
you should define model for select tag.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data =
{
"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="(key,value) in data.xyz">
<div ng-repeat="(k,v) in value">{{v}}</div>
<div>
<select ng-model="model1" ng-options="v1 as v1 for v1 in data.pqr" ng-change="value.b = model1">
</select>
</div>
<div>
<select ng-model="model2" ng-options="number as number for number in data.abc" ng-change="value.c = model2">
</select>
</div>
</div>
</div>

First of all don't use ng-repeat on <option> use ng-options instead. Documentation and examples can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
As for your code, you will need to bind the select to your object:
<select ng-model="product.a" ...> //or which ever property you are trying to update

How to get selected value from dropdown in a table when there is more then 1?

If I have a bunch of table rows and with select tags in them how would I get the selected value?
If the variable "selected_ingr_action" is the same for every row then when I select an item they all change instead of just the one.
I know I'm missing something.
{{#Ingredients}}
<tr>
<td class="ingr-bid-col"></td>
<td>
<div class="row">
<div class="col-xs-12">
<p class="ingr-name">{{Name}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
{{VendorName}}<br />
<b>pack:</b><span>{{Pack}}</span>
</div>
<div class="col-xs-6" style="padding-bottom:5px;">
<div class="caption">
<b>unit price</b><br />
<span>{{UnitPrice}}</span>
</div>
<div class="caption">
<b>case price</b><br />
<span>{{CasePrice}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<select class="form-control" value="{{selected_ingr_action}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
</div>
</div>
</td>
</tr>
{{/}}

I think perhaps you might be asking a much simpler question about why the rows are sharing the value. If this is the case, the short answer is to use a restricted reference (notice the .):
<select class="form-control" value="{{.selected_ingr_action}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
This causes the selected_ingr_action to be bound to the list item, not the root of the ractive instance.
You can access the result on each item with a wilcard observer:
r.observe('list.*.selected_ingr_action', function(n, o, k, i){
console.log('list index', i, 'changed from', o, 'to', n);
});
Check it out here.
The behavior of defaulting to root, rather than current context, is under consideration to be changed to resolve to the current context.

One option would be to have a separate map of selected values, and use two-way binding to update that map (rather than a single selected_ingr_action property, or a selected_ingr_action property belonging to each item in the list). You can see an example of this approach here - the details are different but the principle is the same.
{{#Ingredients :i}} <!-- note the index reference -->
...
<select class="form-control" value="{{selected_ingr_actions[i]}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>

There are to ways to solve this.
First, bind the value of the select into data.
I.e. turn this string:
<select class="form-control" value="selected_ingr_action">
into this:
<select class="form-control" value="{{selected_ingr_action}}">
Assuming that your data structure is something like this:
var Ingredients = [
{
Name: String,
VendorName: String,
UnitPrice: Number,
CasePrice: Number,
selected_ingr_action: String
},
/* other entries */
];
As a second thought, maybe you don't want to store action type inside your data.
I beleive that better approach would be to use so-called Proxy Events with custom arguments and Method Calls.
Here, I add key into your template and when you change your select value, corresponding event handler are called with the index of your row.
Like this:
{{#each Ingredients: key}} <!-- <<< note that key -->
<!-- skip -->
<div class="row">
<div class="col-xs-12">
<select class="form-control" on-change="changeAction(this, key)" value="{{this.selected_ingr_action}}">
<!-- note this too ^^^^^^^^^^^^^^^^^^^^^^ -->
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
</div>
</div>
{{/each}}
Note, into your Ractive component you can introduce method changeAction, which will receive current row (with corresponding Name, VendorName etc. properties) and it's key. Like this:
var ractive = new Ractive({
/* skip */
changeAction: function (ingridient, key) {
// do something with that ingridient
}
/* skip */
});

How to store the selected items in a "Select" field in a model?

I want to display the selected items in a label or list.
I am using switch to switch between form and result. Please see the code below
<div ng-switch on="format">
<div ng-switch-when="form">
<div class="floatLeft">Seeeeeelect</div>
<select multiple="multiple" ng-model="test">
<!--<option value ="sdfsdf" ng-repeat="n in ['a','b','c']">{{n}}</option>-->
<option value ="AAA">AAA</option>
<option value ="BBB">BBB</option>
<option value ="CCC">CCC</option>
</select>
{{test}}
</div>
<div ng-switch-when="result">{{test}}</div>
</div>
<button ng-click="showForm()">Form</button>
<button ng-click="showPreview()">Result</button>
In controller i have the method like below,
$scope.showPreview=function() {
$scope.format='result';
};
$scope.showForm=function() {
$scope.format='form';
};
After selecting the items in list, when i try to switch to see the "result" by tapping "Result" button. The selected item is not populating.
Can anyone tell me where i went wrong.
Thanks

The ng-switch creates sub-scopes. So you have to reference test by $parent.test.
<select multiple="multiple" ng-model="$parent.test">
<div ng-switch-when="result">{{ $parent.test }}</div>
</select>
{{ $parent.test }}
</div>
fiddle