AngularJS：選択オプションに応じてテキストフィールドを表示

Question

私は異なるオプション（数値）を持つドロップダウンを持っています。数字を選択した場合は、前に選択した数字に応じてテキストフィールドの数を表示する必要があります。

例：私はcan'

vm.getTimes = function (n) { 
     return new Array(n); 
    }; 

：

ユーザーは、 "名前" のコントローラで

   <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> 

機能getTimesと呼ばれるテキストフィールド2時間があるはずです番号= 2 を選択選択したオプションをvm.getTimesに渡します - なぜですか？

{{data.singleSelect}}のINTを関数getTimesに書き込むと動作します。

Answer 1

を使用できるようにするには、オプションの固定数VEの。

getTimes = function (n) { 
      if(n){ 
        return new Array(parseInt(n)); 
      }else{ 
        return 0; 
      } 
     } 

それが動作しないのはなぜ？

渡すパラメータの長さは、同じ値の を使用して初期化されます。

nは文字列です。 これを解析する必要があります。

チェックJavaScript#Array。ここで

が働いplunker

Answer 2

あなたはlimitTo

あなた getTimes機能は、このようにする必要があり

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

であるあなたは（あなたが数であると仮定していること）の入力に基づいて、新しい配列を作成しようとしているが、あなたは、これは確かに1になることを保証することはありません。例えば

：

t in getNumber(data.singleSelect * 1) track by $indexがそれを解決するだろうか、

$scope.getNumber = function (num) { 
    return new Array(parseInt(num)); 
} 

も正しくループ機能になるだろう。あなたが何をしようとして

：

> new Array("2") 
< ["2"] 

あなたは何をすべき：

> new Array(2) 
< [undefined × 2] 
//don't worry about undefined for now, but this array has 0 and 1 elements. 

ここにあなたのサンプルと更新フィドルだ：データからhttps://plnkr.co/edit/rPhFnmmKNvHtSirGCYHG?p=preview