CODEWITHSUNDEEP
javascriptcssangularjsangular-material
Jon Donnell
Jon Donnell

Reputation: 111

Dynamically added angular material input not getting styling

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

Upvotes: 1

Views: 899

Answers (1)

bamtheboozle
bamtheboozle

Reputation: 6416

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/

Upvotes: 1

Related Questions