Ajaxの結果からng-initに値を割り当てる

Question

AJAX経由でstudent idを送信する入力フィールドが1つあるフォームがあり、AJAXリクエストからJSON結果を取得しています。 AJAXリクエストから返されたデータは、フォームの下の入力フィールド（電話）のng-initに割り当てる必要があります。この値をng-initに割り当てる方法を教えてください。ありがとうございました！あなたは、STのためにNG-モデルを使用していない

HTML

<div ng-app=""> 
    <form id="std_form"> 
     <input type="text" name="sid" id="sid"> 
     <input type="submit"> 
    </form> 

    <input type="text" name="phone" ng-model="phone" ng-init="" id="phone"> 
    Ph: {{phone}} 
</div> 

jQueryの

$('#std_form').submit(function(e){ 
    e.preventDefault(); 
    var val = $('#sid').val(); 
    var dataString = "sid=" + val; 
    $.ajax({ 
     type: "POST", 
     url: "post_process.php", 
     data: dataString, 
     dataType: 'json', 
     success: function(data){ 
      $('#phone').val(data.phone); 
     } 
    }); 
}); 

post_process.php

<?php 

if(ISSET($_POST['sid'])) { 

    $sid = $con->real_escape_string($_POST['sid']); 

    $sql = "SELECT phone FROM std_detials WHERE sid = $sid"; 
    $result = $con->query($sql); 
    if ($result->num_rows > 0) { 
     $row = $result->fetch_assoc(); 
     $phone = $row['phone']; 
    } 
    $json = array('phone' => $phone); 
    $json = json_encode($json); 
    echo $json; 
} 

?> 

Answer 1

udent idフィールド。角度のあるときは角度がついています。 このコードは、PHPの伝統的な提出手法とJqueryを使ったajax呼び出しを組み合わせたものです。可能な限りそのようなプラクティスを排除し、フレームワークを適切に尊重してください。

このコードを試してください。理解し、適用する。 概要：
jqueryの$.ajaxの代わりにAngularの$httpを使用しました。あなたは同じ電話をかけることも、ネイティブの角度の電話を使うこともできます。

不要なマークアップを削除しました。学生IDの入力にng-modelを追加し、ng-click機能をボタンの送信に使用し、コードをいくらか構造化しました。プロジェクト用のservice.jsファイルがある場合は、そこにコードを追加してください。

このように、基本的にng-initは必要ありません。まれな状況で使用する必要があります。ここでdocsを読んでください。 https://docs.angularjs.org/api/ng/directive/ngInit

希望すると助かります！質問があった場合に私に知らせてください。

<div ng-app="myApp"> 
    <form id="std_form"> 
    <input type="text" ng-model="sid"> 
    <button ng-click="submitSid()"></button> 
    </form> 

    <input type="text" ng-model="phone"> 
    Ph: {{phone}} 
</div> 

JS

var app = angular.module('myApp', []); 
app.controller('MyCtrl', ['StudentService', function(StudentService){ 
    $scope.submitSid = function(){ 
    var data = {sid: $scope.sid}; 
    StudentService.getStudentDetails(data).then(function(res){ 
     console.log(res); 
     $scope.phone = res.phone; // Or change to res.paramName. Just check in console to confirm the res logged. 
    }) 
} 
}]); 

app.factory('StudentService', ['$http', '$httpParamSerializerJQLike',   function($http, $httpParamSerializerJQLike){ 

    var getStudentDetails = function(data){ 
    var params = $httpParamSerializerJQLike(data); 
    return $http({ 
     method: "POST", 
     url: "post_process.php", 
     headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'}, 
     data: params 
    }).then(function(response){ 
     return response.data; 
    }); 
} 

return { 
    getStudentDetails : getStudentDetails 
} 
}]);