Just starting out with angularJS and still in the learning phase. I'm currently working on creating a navbar for the header that will fetch data from an ajax call.
The issue I'm facing is that it displays {{obj.pageData}} until the data is fully loaded. This can be quite frustrating to see every time I refresh the page!
Is there a way to prevent the display of {{obj.pageData}} in the view and instead have it updated directly once all the data is fetched from the JSON?
Below is a snippet of the code:
View:
<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
<div class="nav-center">
<!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
<div>
<a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a>
<div class="farm-links" ng-show="hovering">
<div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
<a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
<ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
<li class="second-link">
<a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Controller:
angular.module('topNavApp', []).controller('navCtrl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http){
$http.get("/content/projdata/myJSONData.json").then(function(response){
$scope.pageData = response.data;
})['catch'](function(){
console.log('failed');
});
}]);
If you need any further details, feel free to ask.