Question

我需要为数组的每个元素附加一些html。我找到了解决方案，但是当我尝试通过javascript动态更新ng-model时，输入从未更新。

我正在尝试解决这样的问题：

javascript：

var divElement = angular.element(document.querySelector('.change'));
        $scope.rowsSelected=($('#querytable').DataTable().rows('.selected').data());
        for(var i = 0; i<$('#querytable').DataTable().rows('.selected').data().length; i++){
            $scope.dataSelected.push($('#querytable').DataTable().rows('.selected').data()[i]);
            divElement.append('<form name="formChooseAdress" ng-submit="submitForm()" novalidate><div class="form-group col-md-4 col-lg-4"><label>Fatura: </label><input type="text" class="form-control" id="ff_'+i+'" ng-model="model_firstField_'+i+'" disabled></div><div class="form-group col-md-4 col-lg-4"><label>Valor total: </label><input type="text" class="form-control" id="fs_'+i+'" ng-model="model_secondField_'+i+'" disabled></div><div class="form-group col-md-4 col-lg-4"><label>Valor a pagar: </label><input type="number" class="form-control" id="ft_'+i+'" ng-model="model_thirdField_'+i+'" max="model_secondField_'+i+'" min="0"></div><br><br><br><p></p></form>');
            var a="model_firstField_";
            var b="model_secondField_";
            var c="model_thirdField_";

            var d=i;
            var res=a.concat(d);
            var res1=b.concat(d);
            var res2=c.concat(d);

            $scope[res]= $scope.dataSelected[i].chosen;
            $scope[res1]= $scope.dataSelected[i].chosen1;
            $scope[res2]= $scope.dataSelected[i].chosen2;
        };
        $scope.$apply();

此代码显示在具有div（其ID更改为div）的模式中。

模式html代码：

<div class="modal fade" id="changeCA" data-backdrop="false" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Changes</h4>
            </div>
            <div class="modal-body">
                <div class="row">

                    <div class="form-group col-md-12 col-lg-12">
                        <label>Data: </label>
                        <input type="date" class="form-control" id="tp" ng-model="model_tp">
                    </div>
                </div>
                <br>
                <br>
                <div class="change">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"
                        ng-click="next()">Next</button>
            </div>
        </div>
    </div>
</div>

如何显示值？

Answer 1

这不是在AngularJS控制器中使用jQuery的好习惯。但是，我可以看到您面临的问题是因为您不是Compiling html的角度了解的HTML。在追加到DOM之前，只需使用$compile服务来编译您的html字符串。您会看到ng-model将会更新。

将$compile注入您的控制器，然后尝试以下代码。

var template = $compile('<form name="formChooseAdress" ng-submit="submitForm()" novalidate><div class="form-group col-md-4 col-lg-4"><label>Fatura: </label><input type="text" class="form-control" id="ff_'+i+'" ng-model="model_firstField_'+i+'" disabled></div><div class="form-group col-md-4 col-lg-4"><label>Valor total: </label><input type="text" class="form-control" id="fs_'+i+'" ng-model="model_secondField_'+i+'" disabled></div><div class="form-group col-md-4 col-lg-4"><label>Valor a pagar: </label><input type="number" class="form-control" id="ft_'+i+'" ng-model="model_thirdField_'+i+'" max="model_secondField_'+i+'" min="0"></div><br><br><br><p></p></form>')($scope, function(clonedElement, scope) { divElement.append(template); });

ng-model绑定无法正确更新

1 个答案: