Присвоение значения ng-init из результата Ajax

Question

У меня есть форма с одним полем ввода для отправки student id через AJAX, и я получаю некоторый результат JSON из запроса AJAX. Теперь возвращаемые данные из запроса AJAX должны быть назначены ng-init в поле ввода (телефон) ниже формы. Пожалуйста, помогите мне, как присвоить это значение ng-init. Спасибо!

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, а затем ajax-вызов через JQuery. Постарайтесь как можно больше устранить такие практики и должным образом одобрить структуру.

Попробуйте этот код. Понимать и применять. Краткое описание:
Я использовал сообщение Angular's $http вместо jQuery $.ajax. Вы можете сохранить один и тот же вызов или использовать вызов углового угла.

Удалена ненужная разметка. Добавлена ​​ng-модель для ввода идентификатора студента, функция ng-click для кнопки, используемой для отправки, и структурированного кода. Если у вас есть отдельный файл services.js для проекта, добавьте в него код службы или просто добавьте новую услугу, как я сделал в коде здесь.

Таким образом, для этой проблемы вам не нужен ng-init. Его следует использовать в редких ситуациях. Пожалуйста, прочитайте документы здесь. 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 
} 
}]);