Extract XML using Ajax and Bind data to SELECT dropdown list with AngularJS ng-options

We often use the HTML <select> dropdown list element to present users with a list of choices, where each item is defined using an <option> tag. You can use the <select> element with in an AngularJS application as will. There are several ways to populate and bind data to a <select> element. AngularJS's ng-options directive offers a more efficient and flexible approach for binding dynamic or static data to the <select> element. In this tutorial, I'll show you how to extract XML data using Ajax and bind the data to SELECT element using ng-options and $scope.

See this demo

The XML File

You can open library.xml file to view it. Copy the contents of the file and save it in your computer and name it as library.xml, because I am using the same file name for the demo here. You can change the name of the file according to your choice later.

The document has many elements. However, for the example I’ll use the BookName attribute to populate the books name inside the <option> attribute.

AngularJS View and Model

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <select ng-model="your_selection" ng-options="b for b in list">
            <option value="">-- Select a Book --</option>
        </select>

        <p>You have selected: {{ your_selection }}</p>
    </div>
</body>

In the view section, I have added the <select> element with two AngularJS directives that is, an ng-model with an ng-options. As you can see, I have hard coded a single <option> with an empty string. It will display the "Select a Book" value when the dropdown list is loaded.

The ng-model directive will display the selected option in the view. I have bound the model to the view using an AngularJS expression.

However, first we need to fill the dropdown list with some values (or data). The ng-options directive will provide that data to the option elements. Take a good look at this line, “b for b in list”. The “list” will have items (extract from the XML doc) and it will loop through each element and fill the dropdown list with these items. We will assign the values to the list in our controller section using the $scope object.

👉 How to extract Data from an XML file using JavaScript

The AngularJS Controller with the $scope

<script>
    var myApp = angular.module('myApp', []);

    myApp.controller('myController', function ($scope, $http) {

        var arrBooks = new Array();

        $http.get("../../library/library.xml").success(function (xml) {
            $(xml).find('List').each(function () {
                arrBooks.push($(this).find('BookName').text())
            });

            $scope.list = arrBooks;
        }).error(function (status) {
            alert(status);
        });
    });
</script>
</html>

Try it

If this your first encounter with AngularJS, then I recommend you look at this article to understand how to initialize and register an AngularJS application inside the controller.

In the above script, I have declared the $scope along with $http. In AngularJS the $http service provides necessary properties to call Ajax Services. The $http.get() method will make a request for the XML data. Once, it receives the XML, it loops through each node and fills the array with data, which it later delivers to the Angular model via $scope.

$scope.list = arrBooks;

Conclusion

AngularJS provides many useful directives, so we can design our Single Page Applications with ease. The ng-options is one of many directives that you would use in your applications many times, since it provides a faster way to bind and populate data to an HTML select dropdown list.

See this demo

← PreviousNext →