I want to count how many iterations my ng-repeat did and do something with that value on my controller.
I tried to create a scope variable and increment it on repeat but couldn't get it to work. It just prints "1" next to every dropdown ng-repeat creates.
I tried this so far;
<section class="col col-2" ng-repeat="detailField in cusDetailFields" required>
<select data-smart-select2 id="detailField-{{detailField}}" ng-model="selectedCustomerDetail[detailField]">
<option class="text-align-right"
value="">{{getFieldText(detailField)}} Seçiniz
</option>
<option class="text-align-right"
value="{{detailFieldValue.Value}}"
ng-repeat="detailFieldValue in cusDetail = (customerDetailFilters | filter : { DetailKey : detailField })">
{{detailFieldValue.Value}}
</option>
</select>
{{counter+1}}
</section>
How can I achieve this?
Related
I encountered a problem with this code, so there's a multiple selection field(generated using ng-repeat). My question is, is there a way where I can make the first selection (from the multiple selections) required without affecting the remaining 3 selections?
<div class="col-sm-3">
<select chosen="template.accOptions.laccOptions"
name="{{ 'AccountId' + $index }}"
ng-model="Map.AccountId"
ng-options="Account.id as (Account.name +'('+ glAccount.glCode +')')
for Account in template.accOptions.laccOptions"
class="form-control">
<option value="" ng-disabled="Map.required">
{{'label.menu.selectone' | translate}}
</option>
</select>
</div>
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 have a Dropdown with Differnt Options (Numbers). If a number was selected, an amount of textfields should be shown depending on the number that was selected before.
Example:
User selects number = 2
There should be two time a textfield called "name"
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="0">---Please select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br>
<div ng-repeat="t in vm.getTimes({{data.singleSelect}}) track by $index">
{{$index}}
<input ng-model="text1" /> <!-- this textfield should be repeated--></div>
Function getTimes in the controller:
vm.getTimes = function (n) {
return new Array(n);
};
I can´t pass vm.getTimes the selected option - why not?
If I write an INT for {{data.singleSelect}} in the function getTimes, it works.
Your getTimes function should be like this.
getTimes = function (n) {
if(n){
return new Array(parseInt(n));
}else{
return 0;
}
}
Why it is not working?
The parameter you passing create array of length initialised using
with the same value.
Because n is string.
You need to parse it to Integer.
Check JavaScript#Array.
Here is the working plunker
You ve a fixed number of options so you can use limitTo
var app = angular.module("app", [])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="0">---Please select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<div ng-repeat="t in [1,2] | limitTo:data.singleSelect track by $index">
{{$index}}
<input ng-model="text1" />
<!-- this textfield should be repeated-->
</div>
</div>
You are trying to create a new array based on the input (that you assume is a number), but you never ensure that this will indeed be one.
For example:
t in getNumber(data.singleSelect * 1) track by $index would solve it, or
$scope.getNumber = function (num) {
return new Array(parseInt(num));
}
would also make your loop function properly.
What you're trying to do:
> new Array("2")
< ["2"]
What you should do:
> new Array(2)
< [undefined × 2]
//don't worry about undefined for now, but this array has 0 and 1 elements.
Here's an updated fiddle with your sample: https://plnkr.co/edit/rPhFnmmKNvHtSirGCYHG?p=preview
I have a problem when I change the value of one dropdown on ng-change. It will changes the other dropdown value also even both dropdown ids are different.
anyone knows why its happening?
Below is my code:
<select class="form-control" id="Billable{{$index}}" ng-init="invoice.source_item=''" ng-model="invoice.source_item" ng-change="BillableItemDetails(invoice.source_item,$index)">
<option class="ng-binding" value="">Select Billable Item...</option>
<option class="ng-binding" ng-repeat="BillableItem in BilableItemsList" value="{{BillableItem.id}}">{{BillableItem.name}}</option>
</select>
use different ng-model variable with different dropdown
Here is Plnkr
HTML
<select ng-model="dd1_Value" ng-change="changedd(ddValue.key)">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 1 : {{dd1_Value}}</p>
<select ng-model="dd2_Value">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 2 : {{dd2_Value}}</p>
Controller
app.controller('MainCtrl', function($scope) {
$scope.dd = [
{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'},
{id:4,name:'d'},
{id:5,name:'e'},
{id:6,name:'f'}
]
});
Change the value of ng-model="invoice.source_item" to a unique scope variable for each DropDown.
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>