Struggling to extract a specific div element from an AJAX response in Angular? Don't want the entire page content to be displayed? Tried various methods but nothing seems to work. Here's what I have attempted:
$http({
method: 'GET',
url: '/angularJS/eg1.html'
})
.then(function (response) {
$scope.page = $sce.trustAsHtml(response.data)
$scope.result = $scope.page.document.getElementById('ajax');
});
Here is how my view looks like:
<div class="container">
<div class="row" ng-bind-html="result">
</div>
To display only the desired div, here is its structure:
<div id="ajax">
<h2>Guess the Number !</h2>
<p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
<label>Your Guess: </label><input type="number" ng-model="guess"/>
<button ng-click="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>
<button ng-click="initializeGame()" class="btn btn-warning btn-sm">Restart</button>
<p>
</div>
Just starting with Angular, so please bear with me :)