AngularJS: Show Textfield depending on Select Option - angularjs

Question

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.

Answer 1

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

Answer 2

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>

Answer 3

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