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

Question

I working on a small pet project that finds exchange rates and I am having trouble passing my input to the angular controller. Say I have a datalist input that shows a selection of countries as you type:

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

And the items are populated using 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();

The currencies.json file looks like this .

I am showing the user the country name and trying to pass the country code to the angular controller so it can find the right exchange rate for that country and display it.

Now my angular controller looks like 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;
    });

}]);

The 'fromCode' is set to USD by default and is supposed to be updated as the datalist item changes which it does. I want angular to perform a new lookup every-time I change my datalist selection in my input form. How do I accomplish this?

Answer 1

You shouldn't be passing anything from your view to your controller. All of your data should be sourced from your controller. All of that javascript you have on your html page should be in your controller.

Once you've done that, you can bind your view to your controller using ng-repeat and ng-model and the data will get updated in your controller automatically.