Styling not being applied to dynamically added Angular Material input

Question

Styling not being applied to dynamically added Angular Material input

I'm attempting to incorporate Angular Material inputs based on a numerical value provided by the user.

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

However, once the inputs are added, they do not receive the material design styling.
https://i.sstatic.net/Dw3ZZ.jpg What is the best approach to add these inputs while maintaining the desired styling? Appreciate your help!

javascript css angularjs angular-material

Answer 1

Answer №1

Instead of manually adding inputs, I suggest using ng-repeat to dynamically create them.

Here's an example of how you can do it: Let me clarify further what ng-model='input.val' means.

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

In your controller, initialize vm.inputs as an array with a single object containing a val property:

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

The val property helps track which input corresponds to which value. To add another input, simply push a new object with a null val in your controller or function like this:

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

You can include additional properties in the input object based on what information you need to manage for each input field.

Check out this demo that demonstrates these concepts: http://jsfiddle.net/fnc2m3uc/1/

Answer 2

Instead of manually adding inputs, I suggest using ng-repeat to dynamically create them.

Here's an example of how you can do it: Let me clarify further what ng-model='input.val' means.

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

In your controller, initialize vm.inputs as an array with a single object containing a val property:

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

The val property helps track which input corresponds to which value. To add another input, simply push a new object with a null val in your controller or function like this:

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

You can include additional properties in the input object based on what information you need to manage for each input field.

Check out this demo that demonstrates these concepts: http://jsfiddle.net/fnc2m3uc/1/

Styling not being applied to dynamically added Angular Material input

Answer №1

Similar questions

Get rid of the unnecessary vertical line that is located at the end of the string

Fetching a destination through the post approach

Cannot locate the state variable

Choose the last element that has a particular class

Checkbox designed in a non-traditional style that requires a label in order to complete the

Sending JSON data from the primary window to the secondary window in Electron - A step-by-step guide

When a class that has specific text is clicked on, execute jQuery code

Combining all string elements in an array while preserving objects - here's how to do it

What is the best way to ensure text in a paragraph remains at the bottom of a div without any additional space below it?

ExpressJS and Angular: Issue with Loading the Index Page

AngularJS is known for its ability to handle dynamic attributes

Enhancing Bootstrap 5 with JavaScript

Issue with transforming rotation in Quirks mode

Retrieve Image Data by Clicking on Canvas at Precise Coordinates

The information provided in a PHP form is not saved in a MySQL database

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

Building a Complex Form with Checkbox Options to Uncover Essential Fields

Creating an array of images using input fields and showcasing them as a dynamic slider

Converting a CSS file into a string by importing it into a JavaScript file

Seamless Integration of Hosted Fields by Braintree