I have a dropdown in one of my div, from which I am selecting the number of dropdowns to be in second div. My task is to be able to select the different values from each of the dropdowns inside the second div. Here is the code I am trying
<div ng-repeat="i in getNumber(secondN2.core.r1r2.value) track by $index">
<div>
<strong><u>For Core link number {{$index+1}}:</u> </strong><br>
<strong>Select IM</strong>
<select ng-model="im" ng-change="calculate()" >
<option value="1 Gig" selected="selected">1 Gig</option>
<option value="10 Gig">10 Gig</option>
</select><br>
</div>
</div>
secondN2.core.r1r2.value is a number, I am converting it to array,a collection, by returning new Array(n), in the getNumber method
How to give the proper ng-model in this case? And how to retrieve the values?
If I try to give i.im, it still does not help. With im, $scope.im is coming undefined
Updated
What is two nested loops are there
<div ng-repeat="j in secondN3.core" style="border:1px solid;">
<strong>Configure Core Links between {{j.name}}</strong><br><br>
<div ng-repeat="i in getNumber(j.value) track by $index">
<div>
<strong><u>For Core link number {{$index+1}}:</u> </strong><br>
<strong>Select IM</strong>
<select ng-model="secondN3.coreValues[[$parent.$index,$index]]" ng-change="calculate()" >
<option value="1 Gig" selected="selected">1 Gig</option>
<option value="10 Gig">10 Gig</option>
</select><br>
</div>
</div>
<div>
Edit:2
This is working: This is the plunker for that
You could have an array in your controller that will hold the selected values:
$scope.values = [];
and then bind your dropdowns to this model:
<select ng-model="values[i]" ng-change="calculate()">
<option value="1 Gig" selected="selected">1 Gig</option>
<option value="10 Gig">10 Gig</option>
</select>
Related
i want to create *ngFor binding to create another form using array and ngModel input.
So when i select the value in it, then i click the button to display new form with different value.
Any ideas how it should be worked?
I have tried this but the result is just same as the other ngModel value.
This is for Progress Tracker in my company, running on AngularJS 8 using Clarity-VMWare. I've tried using let i = index and it doesn't get the value.
HTML:
<div class="card card-report" *ngFor="let item of report">
<div class="card-block block-card">
<div class="card-title">
<div class="clr-wrapper">
<select class="clr-select-1" [(ngModel)]="selectedProjects">
<option [ngValue]="default" disabled>Project yang kamu kerjain apa?</option>
<option [ngValue]="item" *ngFor="let item of listProjects">
{{item.name}}
</option>
</select>
</div>
<div class="clr-wrapper">
<select class="clr-select-2" [(ngModel)]="selectedRoles">
<option [ngValue]="default" disabled>Kamu jadi apa di project ini?</option>
<option [ngValue]="item" *ngFor="let item of listRoles">
{{item.name}}
</option>
</select>
</div>
</div>
<div class="card-text text-card">
<p class="sub-text-card">Kamu belum melakukan apa-apa</p>
</div>
</div>
</div>
TS:
listProjects: any[]
listRoles: any[]
selectedProjects: any;
selectedRoles: any;
addReport() {
this.report.push(this.report.length)
}
The form array was working, but i want to know how the value should be different than the other select.
And the result that i hope works is :
Should be like add new form array, but the value in it can be changed.
Although what you are asking is not very clear. but a possible problem which I see is with [ngValue]. You could try using [value] instead.
<option [value]="item.name" *ngFor="let item of listProjects">
{{item.name}}
</option>
Have code:
<tr data-ng-repeat="item in data.items">
<td>{{item.Id}}</td>
<td>
<div>
{{ data.items[$index].selectedBusinessType.id }}
{{ data.items[$index].businessTypes[$index].id }}
<select ng-options="businessType.name for businessType
in item.businessTypes track by businessType.id"
data-ng-model="item.businessTypes.id == item.selectedBusinessType.id">
</select>
</div>
</td>
</tr>
In div models result is ok, but dropdown still didn't work
DropDown without value screen
Scope data from back
Can i get some solution what i doing wrong?
You will probably need filter. Try something like: (plunker: https://next.plnkr.co/edit/DiInzWMC2k8WZzuH)
<select class="form-control" ng-model="$scope.data.items[0].selectedBusinessType.id" ng-options="businessType.name for businessType in item.businessTypes | filter:doFilter(item.selectedBusinessType)">
</select>
And in controller:
$scope.doFilter = function(id) {
console.log("selectedId:" + Object.values(id))
return function(value, index, array) {
console.log(value.id)
if(value.id == Object.values(id))
return true;
}
};
Relate to the answer in https://stackoverflow.com/a/39635805/4952634
On angularJs version 1.5 work option like this:
Plunk - Use angularJs 1.5x
<select class="form-control" ng-model="data.items[$index].selectedBusinessType.id"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, selectedBusinessType.id)">
<option ng-repeat="businessType in item.businessTypes" ng-value="businessType.id">
{{businessType.id}}
</option>
</select>
But this don't work on version 1.4+.
Plunk - Use angularJs 1.4x
<div>
<select class="form-control" ng-model="data.items[$index].selectedBusinessType.id"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, selectedBusinessType.id)">
<option ng-repeat="businessType in item.businessTypes" ng-value="businessType.id">
{{businessType.id}}
</option>
</select>
</div>
Second worked option - use ng-option:
Ng-Option using
<select class="form-control" ng-model="item.selectedBusinessType"
ng-options="option.id as option.name for option in data.businessTypes"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, item.selectedBusinessType, '{{item.selectedBusinessType}}')">
<option value="">-- Не указан --</option>
</select>
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
So here is the deal, im getting different objects from ajax request ($scope.productos - $scope.ofertas) and then using ng-foreach for both to show them so user can select multiple items (stored in $pedidoForm.productos and
pedidoForm.ofertas) and this selected items dinamically show up below with another ng-repeat showing the 'nombre' property and adding another new property and value with input but the atribute VALUE is automatically converting any object into a string, resulting in a "{property: value}" so i cant read the property correctly
<div class="row">
<span>Productos</span>
<select class="selectpicker" ng-model="pedidoForm.productos" ng-change=parse(pedidoForm.productos) multiple>
<option ng-repeat="producto in productos" value="{{producto}}"> {{producto.nombre}}
</option>
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker" ng-model="pedidoForm.ofertas" ng-change="test(pedidoForm)" multiple>
<option ng-repeat="oferta in ofertas" value="{{oferta}}"> {{oferta.nombre}} </option>
</select>
</div>
as I understand you need to select an object, but HTML5 select tag supports only string values. So, try to use ng-options directive:
<div class="row">
<span>Productos</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.productos"
ng-change="parse(pedidoForm.productos)"
ng-options="producto as producto.nombre for producto in productos track by producto.nombre">
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.ofertas"
ng-change="test(pedidoForm)"
ng-options="oferta as oferta.nombre for oferta in ofertas track by oferta.nombre">
</select>
</div>
plunker: http://plnkr.co/edit/jl1cayWXif7fukQRviTw?p=preview
I am creating a list of <select>'s with ng-repeat, there is a item.quantity that I need to be selected in each select in the list, I have tried several ways without success. Any help would be appreciated.
<div ng-repeat="item in items">
<select ng-model="selCartQuantity">
<option index="1" ng-selected="item.quantity=='1'">1</option>
<option index="2" ng-selected="item.quantity=='2'">2</option>
<option index="3" ng-selected="item.quantity=='3'">3</option>
<option index="4" ng-selected="item.quantity=='4'">4</option>
<option index="5" ng-selected="item.quantity=='5'">5</option>
</select>
</div>
in your controller you put the following code (of course you change $scope.items to your actual object )
$scope.items = [{name:'aaaaa'},{name:'bbbbb'}];
$scope.options= [1,2,3,4,5];
$scope.items.forEach(function(item,index){
item.selCartQuantity= $scope.options[0];
});
and in the html markup you put the following
<div ng-repeat="item in items">
<select ng-model="item.selCartQuantity" ng-options="option for option in options"></select>
</div>
`
I would reccomend checking out the angular select driective, as you shouldn't have to do the ng-repeat at all. The select directive will automatically set the selected option to be what you have in your model.