doitliketyler doitliketyler - 5 months ago 11
Javascript Question

Problems with Angular button

I'm creating my first Angular app and ran into a couple things that I just can't figure out. Whenever I include this:

<button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>


Inside of my template the app refuses to load but if I paste it anywhere outside of the template it works fine. I'd like to keep the button inside the template if at all possible so what on earth am I doing wrong?

Also, I'd like that button to also scroll to the #footer div and the ng-click doesn't seem to run this bit code:

$scope.gotoBottom = function() {
$location.hash('footer');
$anchorScroll();
};


I've created a Plunker of my code that can be found here:

https://plnkr.co/edit/MP4Pp4WLcn5EFb3pTEXx

Answer

By "template" if you are talking about projects template. Here is what you need to do.

Explanation:

The projects template need to have only one root element, so I added a div to wrap your project listing and show more button.

<div>
  <div class="cards" ng-init="limit = 3">
    <div class="card" ng-repeat="project in projects | limitTo: limit as results">
      <div class="card-image">
        <img src="{{project.img}}" alt="{{project.name}}" />
      </div>
      <div class="card-copy">
        <h2>{{project.name}}</h2>
        <p>{{project.desc}}</p>
        <p><a href="{{project.url}}" target="_blank"><i class="fa fa-location-arrow"></i></a></p>
      </div>
    </div>
  </div>

  <button ng-hide="results.length === projects.length" ng-click="limit = limit +3; gotoBottom()">Show More</button>
  <div id="footer" name="footer"></div>
</div>

For auto scroll: inject $timeout service

Explanation:

You did not had any div named footer so I added one just below the show more button and added a 100ms timeout, so that after your 3 projects load, it will scroll to the footer div. $timeout is very necessary because need to first render your projects and then scroll.

$scope.gotoBottom = function() {
  $timeout(function() {
    $location.hash('footer');
    $anchorScroll();
  }, 100);
};

Working Plunker: https://plnkr.co/edit/U3DDH57nh0Mqlpp2Txi4?p=preview

Hope this helps!