[AngularJS]Angularjs︰ 自动填充文本框值从数据库通过点击按钮

发布时间: 2017/4/16 21:33:06
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

这是我在视图上的代码︰

input type="text" name="passno" ng-keyup="fetchdata()" class="form-control" ng-model="FormData.passno"

input name ="firstname" type="text" class="form-control"  ng-model="FormData.fname" ng-disabled="isDisabled"

input  name="lastname"  type="text" class="form-control" ng-model="FormData.lname" ng-disabled="isDisabled"

对控制器端︰

$scope.FormData = {passno:''};
    $scope.fetchdata = function() {

        $scope.$watch('FormData.passno',function(){
        $http({
            method: 'POST',
            url: 'server/company/getPassnoData',
            data: {passno:$scope.FormData.passno },
            headers: {'X-API-KEY': $rootScope.currentUser.key}

        })
            .success(function(data){
                $scope.autofill = data;
                if(data) {
                    SweetAlert.swal({
                        title: "Warning?",
                        text: "User with this passport number is already registered as "+$scope.autofill.CandData.f_name,
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Auto Fill",
                        cancelButtonText: "Reset",
                        closeOnConfirm: false,
                        closeOnCancel: false
                    }, function (isConfirm) {
                     if (isConfirm) {                           

    $scope.FormData.fname= $scope.autofill.CandData.f_name;
$scope.FormData.lname= $scope.autofill.CandData.l_name;
});

我的问题是甜警报将正确生成警报。当我点击自动填充它显示成功但文本框中的值不能显示,直到单击手动在特定文本框中它然后将显示所有值的文本框中,但我想只是都显示通过单击自动填充。基本上我想要动态显示文本框值。我只取输入护照号码字段比它发送请求和结果来名字,姓氏字段具有动态显示。

解决方法 1:

如果你改变任何在非角组件内它不会运行 $digest 向它链接的无处不在的变动的影响。

您需要将更改应用于非角组件。

添加$scope.$apply()

喜欢这个

$scope.FormData.fname= $scope.autofill.CandData.f_name;
$scope.FormData.lname= $scope.autofill.CandData.l_name;
$scope.$apply()

或像这样

$scope.$apply(function(){
    $scope.FormData.fname= $scope.autofill.CandData.f_name;
    $scope.FormData.lname= $scope.autofill.CandData.l_name;  
})
赞助商