<html ng-app="historyApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="HistoryController">
<h1>Historical Places</h1>
<div ng-repeat="place in places" ng-click="showDetails(place)">
{{ place.name }}
</div>
<div ng-show="selectedPlace">
<h2>{{ selectedPlace.name }}</h2>
<p>{{ selectedPlace.history }}</p>
<button ng-click="selectedPlace = null">Back</button>
</div>
<script>
var app = angular.module('historyApp', []);
app.controller('HistoryController', function ($scope) {
$scope.places = [
{ name: 'Colosseum', history: 'The Colosseum is an ancient amphitheatre in Rome...' },
{ name: 'Great Wall of China', history: 'The Great Wall of China is a series of fortifications...' },
{ name: 'Taj Mahal', history: 'The Taj Mahal is an ivory-white marble mausoleum...' }
// Add more historical places as needed
];
$scope.showDetails = function (place) {
$scope.selectedPlace = place;
};
});
</script>
</body>
</html>
No comments:
Post a Comment