I'm trying to add Angular Material inputs based on a number the user enters.
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);
But once the inputs are added, they don't get the material styling.
https://i.sstatic.net/Dw3ZZ.jpg
How can I add these inputs and get the styling? Thanks
Instead of adding inputs like you are, I recommend using ng-repeat.
So you'd have something like this: I'll explain in a bit what ng-model='input.val' is.
<div ng-repeat="input in vm.inputs">
<md-input-container><input type='text' data-ng-model='input.val'></md-input-container>
</div>
Then, in your controller you will initialize vm.inputs as an array with a single object, with a val property like so:
vm.inputs = [{
val: null
}];
The val property is so you keep track of which input has which value.
Whenever you want to add another input, you just push a new object with a null val in your controller / function, like so:
vm.addInput = function () {
vm.inputs.push({val:null});
}
Of course, you can add as many properties to the input object as you wish, depending on what you need to keep track of for your inputs.
Here's a fiddle putting this all together: http://jsfiddle.net/fnc2m3uc/1/
$compileservice, or take another approach with anng-repeat