Jquery Angular在更改时启用BTN

时间:2015-10-27 03:26:06

标签: javascript php jquery angularjs

人。我有这种代码的和平让我感到困惑,我陷入了困境。

我有一个下拉列表,当用户选择一个选项时,它会从db收集数据。选择后,字段将填充与每个字段对应的数据。该表格由angularjs验证。即使字段填充了数据,该按钮仍处于禁用状态。

index.php js

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>amazonaws.com</key>
        <dict>
            <key>NSExceptionRequiresForwardSecrecy</key>
            <false/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

我的问题是我将如何在表单上启用提交按钮。当已经填写完毕。

HTML表单

$("#quick_fill").change(function () {

var id = $(this).val();

    $.ajax({
    url : "php/autofill.php",
    data : {
    "id" : id
    },
    type : "POST",
    dataType : "json",
    success : function(data) {
      console.log(data.fname);
        $("#first").val(data.fname);
        $("#first").removeClass("ng-pristine ng-invalid ng-invalid-required ng-touched");
        $("#first").addClass("ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched");
        $("#last").val(data.lname);
        $("#last").removeClass("ng-pristine ng-invalid ng-invalid-required ng-touched");
        $("#last").addClass("ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched");
        $("#middle").val(data.mname);
        $("#middle").removeClass("ng-pristine ng-invalid ng-invalid-required ng-touched");
        $("#middle").addClass("ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched");
}
    });
});

1 个答案:

答案 0 :(得分:0)

如果将jquery和angular代码混合在一起会有问题 - 在很多情况下它可能会出错。

在这种特殊情况下,您只是更新输入字段的css类。以角度表示的表单的内部表示仍然认为它是无效的 - 即使您从字段中删除所有ng-invalid。

您应该尝试更新应用以使用设置值的角度方式。

$scope.change = function () {
    var id = $scope.selectedId;

    $http({
      url : "php/autofill.php",
      data : {
        "id" : id
      },
      method : "POST"
    }).then(function(response) {
        var data = response.data;
        console.log(data.fname);
        $scope.first = data.fname;
        $scope.frm.first.$setValidity(true);
        $scope.frm.first.$setPristine(false);
        ...
    });
  };

(以上代码仅供参考,未经测试)