角度材料入力が動的に追加され、スタイリングが行われない

Question

ユーザが入力した数値に基づいて角度材料入力を追加しようとしています。

var inputArray = []; 
    for(var i=0; i<vm.boxQty; i++) 
    { 
     inputArray.push("<md-input-container><input type='text' data-ng-model='vm.trackingNumber'></md-input-container>"); 
    } 
    angular.element('.box-inputs') 
    .html(inputArray); 

しかし、入力が追加されると、マテリアルスタイリングは取得されません。
http://imgur.com/a/vtgZl これらの入力を追加してスタイリングを取得するにはどうすればよいですか？ありがとう

Answer 1

あなたのような入力を追加する代わりに、ng-repeatを使用することをお勧めします。

だから、あなたはこのようなものを持っています：私はちょっと説明しますng-model='input.val'です。

<div ng-repeat="input in vm.inputs"> 
     <md-input-container><input type='text' data-ng-model='input.val'></md-input-container> 
</div> 

次に、あなたのコントローラにあなたがそうのようなvalプロパティで、単一のオブジェクトの配列としてvm.inputsを初期化します：

vm.inputs = [{ 
    val: null 
}]; 

valプロパティは、あなたがを追跡しています入力にはどの値がありますか。 あなたが別の入力を追加したいときはいつでも、あなたは自分のコントローラ/機能にヌルvalを持つ新しいオブジェクトをプッシュし、そのように：もちろん

vm.addInput = function() { 
     vm.inputs.push({val:null}); 
} 

、あなたはあなたのような入力オブジェクトに同様に多くのプロパティを追加することができますあなたの入力を追跡する必要があるかどうかに応じて、希望します。

ここですべて一緒にこれを置くことフィドルです：http://jsfiddle.net/fnc2m3uc/1/