Angular Show An Scroll not working

Question

When I click on show5 and then goto5 it works as expected, but when I click on showngo5 its not working as expected, even though the same methods are called.

Why is showngo5 not working in this plunker

html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example51-production</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="anchorScrollOffsetExample" ng-controller="headerCtrl">
  <div class="fixed-header">
    <a href="" ng-click="gotoAnchor(x.i)" ng-repeat="x in ids" ng-show="x.visible">
      goto{{x.i}}
    </a><br/>
    <a href="" ng-click="toggle(x)" ng-repeat="x in ids">
      <span ng-show="x.visible">hide</span><span ng-show="!x.visible">show</span>{{x.i}}
    </a><br/>
    <a href="" ng-click="showngo(x)" ng-repeat="x in ids">
      <span ng-show="x.visible">hide</span><span ng-show="!x.visible">showngo</span>{{x.i}}
    </a>
  </div>
  <div id="anchor{{x.i}}" class="anchor" ng-repeat="x in ids" ng-show="x.visible">
    Anchor {{x.i}} of 5
  </div>
</body>
</html>

js:

(function(angular) {
  'use strict';
angular.module('anchorScrollOffsetExample', [])
  .run(['$anchorScroll', function($anchorScroll) {
    $anchorScroll.yOffset = 100; // always scroll by 50 extra pixels
  }])
  .controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
    function ($anchorScroll, $location, $scope) {
      $scope.ids = [
        {i:1,visible:true},
        {i:2,visible:true},
        {i:3,visible:true},
        {i:4,visible:true},
        {i:5,visible:false}
      ];
      $scope.toggle = function(x) {
        if(x.visible){
          x.visible=false;
        }else{
          x.visible=true;
        }
      };
      $scope.showngo = function(x) {
        $scope.toggle(x);
        $scope.gotoAnchor(x);
      };
      $scope.gotoAnchor = function(x) {
        var newHash = 'anchor' + x;
        if ($location.hash() !== newHash) {
          $location.hash('anchor' + x);
        } else {
          $anchorScroll();
        }
      };
    }
  ]);
})(window.angular);

css:

body {
  padding-top: 100px;
}
.anchor {
  background-color: DarkOrchid;
  margin: 2px;
  padding: 10px 10px 300px 10px;
}

.fixed-header {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100px;
  position: fixed;
  top: 0; left: 0; right: 0;
}

.fixed-header > a {
  display: inline-block;
  margin: 5px 15px;
}

mtamma · Accepted Answer · 2016-05-16 09:47:02Z

1

change this code on line #25 JS file

$scope.gotoAnchor(x.i);

The problem is you try to passing x object into gotoAnchor function rather then a number.

answered May 16, 2016 at 9:47

mtamma

5334 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anand Rockzz Over a year ago

that was such a silly issue, late sleepless night issue.. thanks

Krupesh Kotecha · Accepted Answer · 2016-05-16 10:04:47Z

1

Update showngo function by below code. issue in your code is that when you call $scope.gotoAnchor(x); inside showngo method it will scroll to anchor[Object,Object] instead of scrolling anchor5 because whole object is passed inside x.

$scope.showngo = function(x) {
    $scope.toggle(x);
    $scope.gotoAnchor(x.i);
};

answered May 16, 2016 at 10:04

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angular Show An Scroll not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related