在动态添加的情况下未应用 ng 样式 html

Question

我有一个表单，其中的字段在单击按钮时动态添加。这是添加表单字段的函数

$scope.addFormField = function(){
    let container = document.getElementById('formFieldContainer');
    // a variable which keeps track of the number of fields added
    $scope.obj.fieldCount++;
    let formField = '<md-input-container><label>Mobile Number</label><input type="text" required name="mobileNo_' + $scope.obj.fieldCount + '" ng-model="obj.mobileNumberArr[' + $scope.obj.fieldCount +']" ng-pattern="/^[1-9]{1}[0-9]{9}$/" ng-style="form.mobileNo_' + $scope.obj.fieldCount + '.$valid ? {\'border-color\': \'green\',\'color\': \'green\'}:0"></md-input-container>';
    container.appendChild($compile(formField)($scope)[0]);
}

如果我直接在 html 中编写表单域代码，ng 样式将得到正确应用。但是，如果我使用上面的函数添加表单字段，则不会应用 ng 样式。

为了让 ng-style 在动态添加的字段中工作，我是否应该在我的代码中添加任何其他内容。

Answer 1

您可以在变量中设置ng-style内容，然后在formField中使用它：

$scope.addFormField = function(){
    let container = document.getElementById('formFieldContainer');

    // SET VARIABLE BASED ON CONDITION
    let newstyle = condition ? "{\'border-color\': \'green\',\'color\': \'green\'}" : 0;

    // a variable which keeps track of the number of fields added
    $scope.obj.fieldCount++;
    let formField = '<md-input-container><label>Mobile Number</label><input type="text" required name="mobileNo_' + $scope.obj.fieldCount + '" ng-model="obj.mobileNumberArr[' + $scope.obj.fieldCount +']" ng-pattern="/^[1-9]{1}[0-9]{9}$/" ng-style="' + newstyle + '"></md-input-container>';
    container.appendChild($compile(formField)($scope)[0]);
}

查看演示：DEMO

在动态添加的情况下未应用 ng 样式 html

ng-style not getting applied in case of dynamically added html

angularjs

angularjs-ng-style