Question

我在一个小型宠物项目上工作，找到汇率，我无法将输入传递给角度控制器。假设我有一个数据列表输入，在您键入时显示一系列国家/地区：

<label for="ajax">From</label>
<input type="text" id="ajax" list="json-datalist">
<datalist id="json-datalist"></datalist>

使用JavaScript填充项目：

// Get the <datalist> and <input> elements.
var dataList = document.getElementById('json-datalist');
var input = document.getElementById('ajax');

var fromCode = 'USD';
// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();

// Handle state changes for the request.
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
    if (request.status === 200) {
        // Parse the JSON
        var jsonOptions = JSON.parse(request.responseText);

        // Loop over the JSON array.
        jsonOptions.forEach(function(item) {
            // Create a new <option> element.
            var option = document.createElement('option');

            // Set the value using the item in the JSON array.
            option.value = item.name;
            fromCode = item.code;
            // Add the <option> element to the <datalist>.
            console.log(option);

            dataList.appendChild(option);
        });

        // Update the placeholder text.
        input.placeholder = "e.g. United States Dollar - USD";
    } else {
        // An error occured :(
        input.placeholder = "Couldn't load currency options :(";
    }
}
};

// Update the placeholder text.
input.placeholder = "Loading currencies...";

// Set up and make the request.
request.open('GET', 'js/currencies.json', true);
request.send();

currency.json文件看起来像this。

我向用户显示国家/地区名称并尝试将国家代码传递给角度控制器，以便找到正确的交换该国家的费率并显示它。

现在我的角度控制器看起来像这样：

var myApp = angular.module("myApp", []);
myApp.controller("myController", ['$scope', '$http', function ($scope, $http) {

$scope.from = fromCode;
$http.get("https://api.fixer.io/latest?symbols=" + $scope.from)
    .then(function (response) {
        $scope.newRate = response.data;
    });

$http.get("https://api.fixer.io/latest?base=USD")
    .then(function (response) {
        $scope.currencies = response.data;
    });

}]);

默认情况下，'fromCode'设置为USD，并且应该随着datalist项目的更改而更新。我希望angular能够每次在输入表单中更改我的datalist选择时执行新的查找。我该如何做到这一点？

Answer 1

你不应该将任何东西从你的视图传递给你的控制器。您的所有数据都应来自您的控制器。您在html页面上的所有javascript都应该在您的控制器中。

完成后，您可以使用ng-repeat和ng-model将视图绑定到控制器，数据将自动在控制器中更新。

如何将表单输入数据从datalist传递到角度控制器？

1 个答案: