Я получаю некоторые данные с сервера и на основании этого я инициализирую ng-значение ввода, которое отображается после выборки данных. Но после этого, когда я вызываю функцию с ng-change, журнал консоли не показывает измененное значение ng-model="chosedOption". Он продолжает печатать «Paytm Blance» даже после выбора других переключателей.
angular js файл
var app = angular.module("formModule", []);
var formController = ($scope, $http) => {
$scope.chosedOption = "Paytm Balance";
$scope.amount = 10;
$scope.resJson = "";
$scope.payOptions = undefined;
$scope.proceed = (chosedOption) => {
console.log(chosedOption);
console.log($scope.chosedOption);
}
$scope.loadDoc = () => {
const orderId = Math.floor(Math.random() * 10000) + 100000;
const data = {
amount: $scope.amount,
orderId: orderId
}
$http.post("http://localhost:3200/intiate_transaction_api",data)
.then(response => {
$scope.resJson = JSON.stringify(response, undefined, 4);
console.log(response);
let data = {
txnToken: response.data.body.txnToken,
orderId: orderId
}
$http.post('http://localhost:3200/fetch_payment_option_api', data)
.then(response2 => {
$scope.resJson = JSON.stringify(response2, undefined, 4);
$scope.payOptions = response2.data.body.merchantPayOption.paymentModes;
})
})
}
}
app.controller("formController", formController);
app.filter('safeHtml', $sce => {
return function(val) {
return $sce.trustAsHtml(val);
}
})
html файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<title>UI</title>
</head>
<body ng-app="formModule" ng-controller="formController">
<div class="result">
<div class="container">
<form name="amt" action="#"></form>
total amount<input type="text" id="amount" ng-model="amount" name="amount">
<button ng-click="loadDoc()">Pay</button>
</div>
</div>
<div id="payOtions" ng-if="payOptions">
<div ng-repeat="option in payOptions">
<label>
<div class="paymentOption" ng-class="">
<input name="payOption"
ng-change="proceed(option.displayName)"
ng-model="chosedOption" type="radio"
ng-value="option.displayName">
{{option.displayName}}
</div>
</label>
</div>
</div>
<pre><code id="demo" ng-bind-html="resJson | safeHtml">