如何将表单输入数据从数据列表传递到我的角度控制器

How do I pass form input data from a datalist to my angular controller?

本文关键字：数据 我的 控制器 列表 表单 输入      更新时间：2023-09-26

我正在做一个查找汇率的小型宠物项目，我在将输入传递到角度控制器时遇到问题。假设我有一个数据列表输入，在您键入时显示所选国家/地区：

<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 文件如下所示。

我向用户显示国家/地区

名称，并尝试将国家/地区代码传递给角度控制器，以便它可以找到该国家/地区的正确汇率并显示它。

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

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"设置为美元，并且应该随着数据列表项的更改而更新。我希望 angular 每次在输入表单中更改数据列表选择时都执行新的查找。我该如何实现此目的？

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

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

相关文章：