0

I am using Ionic to build an app. I have this code to load buttons based on data pulled from a remote site. When the view loads initially, I have a button element that uses ng-repeat to display each pdf link. While the app is pulling data it shows a blank button due to this. How can I hide this or remove it from the view? Or is there a way to have the button not render until the data is retrieved? Thanks

<div class="centerButtons">

    <button class="benchmark" ng-repeat="pdf in pdfArray" ng-click="pdfOpen.link('https://docs.google.com/viewer?url={{ pdf.link }}')">
        {{ pdf.title }}
    <button>
</div>
krystofurr
  • 137
  • 1
  • 1
  • 7
  • You need a "onComplete" action, but there isn't such a thing for ng-repeat. You can use directives to do it yourself - there's a question explaining how to do this here: http://stackoverflow.com/questions/13471129/ng-repeat-finish-event – Chris Anderson Jul 20 '15 at 01:06
  • I'm not sure if this will work in this instance. Before the javascript begins to fetch data for the model, the view loads in the window with the empty button markup. Once the data is retrieved, the ng-repeat creates the buttons but leaves the blank one there as well. Could a directive be created to prevent the button from showing until the model is fully retrieved and then execute? – krystofurr Jul 20 '15 at 21:42
  • Yeah, I'd use a flow like 1)have div.centerButtons hidden by default 2) Data loads 3) Once the last item has been loaded, show div.centerButtons – Chris Anderson Jul 21 '15 at 18:38
  • I have done this by using ng-hide, ng-show and/or ng-if directives attached to the div. When it shows once the loading is finished and the directive is truthy, it still shows a single blank button at the end. If the div is hidden, does that mean the button element inside should not be created with the ng-repeat attached? – krystofurr Jul 22 '15 at 00:36
  • Even if the div is hidden, the ng-repeat should still execute. It's still in the DOM after all. – Chris Anderson Jul 22 '15 at 00:39
  • So I guess I need it to not execute until the data is loaded. How can I prevent it from doing that though and have it defined in the view still. – krystofurr Jul 22 '15 at 00:48
  • 1
    omg...nm. I found the issue. I didn't close the – krystofurr Jul 22 '15 at 01:04

1 Answers1

0

You can have two approaches

1.Use ionic loader $ionicLoading.show before data is fetched and the hide the laoder using $ionicLoading.hide()

  1. Using resolve in the controller.
Swapnil Shende
  • 305
  • 1
  • 5
  • 17
  • I do use $ionicLoading.show and .hide but it still shows an empty button in the background while it is in a .show state. I'm not too familiar with resolve. Is this a service? – krystofurr Jul 20 '15 at 21:35
  • check out this [link](http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx) – Swapnil Shende Jul 21 '15 at 07:44