CODEWITHSUNDEEP
javascriptangularjs
RRPANDEY
RRPANDEY

Reputation: 235

AngularJS shows model text before loading entire page

The code below shows the {{x.film}} before loading the entire page. Once the page gets loaded, everything is perfect and {{x.film}} goes off. I need to remove that.

It comes from here: <li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}"><b>{{x.film}}</b></a></li> from the code below.

Please refer to the attached screenshot.

<div class="search-box">
  <div class="input-group-lg right-inner-addon" ng-app="myApp" ng-controller="movieCtrl">
    <i class="glyphicon glyphicon-search"></i>
    <input type="search" ng-model="film" ng-model-options="{debounce: 250}" class="form-control" placeholder="Search Films">
    <ul ng-show="film">
      <li ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}"><b>{{x.film}}</b></a></li>
    </ul>
  </div>
</div>

enter image description here

Upvotes: 1

Views: 393

Answers (4)

Praveen Singh
Praveen Singh

Reputation: 2569

Use ng-cloak

<li ng-cloak ng-repeat="x in movies | filter:film | orderBy:'film'" style="list-style-type:none;"><a href="{{ x.param }}"><b>{{x.film}}</b></a></li>

Also add this to your css:

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

As per AngularJS ngCloak documentation:

When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.

https://docs.angularjs.org/api/ng/directive/ngCloak

Upvotes: 6

GPicazo
GPicazo

Reputation: 6676

Are you fetching the movies from your controller? It looks like the problem might be that you movies are not initialized when the template loads. If that is the case, then you should consider using a resolve to fetch your data before you view/controller is actually loaded. If you are using ui router, you can do that in the state:

.state('yourStateName', {
    ...
    resolve: {
        movies: function($http) {
            return $http.get(....);
        }
    }
});

and in your controller, just inject the movies like

.controller('yourControllerName', [..., 'movies', function(..., movies) {
    $scope.movies = movies;
});

Upvotes: 1

Strelok
Strelok

Reputation: 51451

Add ng-cloak to your ng-app div.

Upvotes: 1

svikasg
svikasg

Reputation: 93

In your controller you can wrap your related code inside of a 

if(x.param) {
 // your code
}

This will ensure to fire the code only when there is params defined for x. I'm guessing its firing for the intermediary state of page reload.

Upvotes: 0

Related Questions