I recently created a basic HTML page using AngularJS that features a dropdown menu displaying manufacturer names. Upon selecting a manufacturer, the corresponding ID is shown in a text box below. I utilized the ng-repeat directive for displaying the manufacturers' names in the dropdown and the ng-model directive to display the selected manufacturer ID.
Below is my HTML code:
<!DOCTYPE html>
<html ng-app="jsonapp">
<head>
<script src="angular.min.js"></script>
<title></title>
</head>
<body>
<div ng-controller='JsonController'>
<span>Please select a Manufacturer:</span>
<li ng-model="Manufacturers" ng-repeat="Manufnames in Manufacturers" style="width:350px;">
{{Manufnames.ManufacturerName}}
</li>
// The dropdown menu displaying Manufacturer Names
<input type="text" /> // Displaying the corresponding Manufacturer ID
</div>
<script>
var app = angular.module('jsonapp', []);
app.controller('JsonController', function ($scope, $http) {
$http.get('Pipes.json')
.success(function (response) { $scope.Manufacturers = response.Pipesmanuf; });
});
</script>
// I have both the JSON and HTML files stored in the same folder; so, passing the JSON filename directly to the http.get() function to retrieve data.
</body>
</html>
// My JSON file contains the following data:
{
"Pipesmanuf": [
{
"ManufacturerId": 1,
"ManufacturerName": "Avonplast",
"Products": "PIPES",
"ManufacturerLogo": "C:\Users\Suprith\Desktop\Manufacturerlogos\Pipes\avonplast.jpg"
},
{
"ManufacturerId": 2,
"ManufacturerName": "BEC",
"Products": "PIPES",
"ManufacturerLogo": "C:\Users\Suprith\Desktop\Manufacturerlogos\Pipes\BEC.png"
}
]
}
As a newcomer to Angular JS, I would appreciate any suggestions on how to load data from a JSON file and display it using HTML dropdowns or lists.