Question

我有一个AngularJS应用程序，需要动态添加AngularJS材质组件。我正在使用Jquery通过单击按钮来做到这一点。

正在将组件添加到布局中，但样式未应用于它。

但是页面加载的其他组件看起来也很好。

有人可以帮我解决这个问题吗？谢谢。

这是我的jquery代码。

$(document).ready(function(){
    var counter = $('#contactNum').val();
    $('#addEmergencyContact').click(function() {
        counter++;
        $('#contactNum').text(counter);
    $(this).before('<div class="card-body pt-0">
<div class="row">
    <div class="col-md-12">
        <md-input-container class="md-block mx-4 mt-4" flex-gt-sm>
            <label>First name</label>
            <input type="text" name="firstname" id="firstname" ng-model="emergency_firstname" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Surname</label>
            <input type="text" name="lastname" id="lastname" ng-model="emergency_lastname" autocomplete="off" >
        </md-input-container><md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Email</label>
            <input type="text" name="email" id="email" ng-model="emergency_email" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Phone Number</label>
            <input type="text" name="phone" id="phone" ng-model="emergency_phone" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" md-theme="altTheme1"  flex-gt-sm>
            <label>Relationship to you</label>
            <md-select ng-model="relation" placeholder="Relationship" ng-selected="get_Selected_relation()" >
                <md-option value="Spouse">Spouse</md-option>
                <md-option value="Partner">Partner</md-option>
                <md-option value="Parent">Parent</md-option>
                <md-option value="Friend">Friend</md-option>
            </md-select>
        </md-input-container>
    </div>
</div>
    <button id="removeEmergencyContact">Remove Contact</button> 
  </div>');
  });

    $(document).on('click','#removeEmergencyContact',function() {
        counter--;
        $('#contactNum').text(counter);
    $(this).parent('div').remove();
    });  
});

这是我的AngularJS代码

var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);
app.controller('ParticipantController', function($scope) {

});

到目前为止，我还没有写任何东西来设置AngularJS组件的值。所以是空白。

这是图片

图像的上部在加载时呈现，而单击添加按钮时图像的下部在加载时呈现。

Answer 1

过去几周我一直在寻找解决方案。最后，@ Rayon的解决方案帮助我解决了它。

任何面临相同问题并正在寻找解决方案的人都可以关注此帖子。

add form fields dynamically on user click using angular js。

希望有帮助。谢谢。

将AngularJS材质设计样式应用于动态创建的元素

1 个答案: