2

I'm using AngularJS 1 with the onsen framework to develop an app, and I'm trying out the following example:

CodePen example

angular.module('myApp', ['onsen', 'ngAnimate']).controller('MyCtrl', function($scope) {
  $scope.groups = [];
  for (var i = 0; i < 10; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j = 0; j < 3; j++) {
      $scope.groups[i].items.push(i + '-' + j);
    }
  }

  /*
   * if given group is the selected group, deselect it
   * else, select the given group
   */
  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };

});

In the example you can see, that they use the ng-show and ng-hide functions on the elements.

I tried the code out, myself, but couldn't get the list to collapse, since the ng-hide is not working.

I even downloaded the angular-animate.js module and loaded it, but it's not working.

Any tips?

Laureant
  • 979
  • 3
  • 18
  • 47
  • Works fine for me. What browser are you using ? – LoremIpsum Nov 14 '16 at 17:39
  • Chrome. It worked before, but now I updated to Onsen v2, started a brand new project (the old one in Onsen v1 was 1 year old, and had some tweaks under the hood, that I didn't want to bring into the new project). It also won't work in the PhoneGap emulator, or anywhere, for that matter. I think I'm missing some directives...? – Laureant Nov 15 '16 at 12:47
  • Onsen UI should not affect ngShow or ngHide. It works here without problems: https://codepen.io/frankdiox/pen/VmKowz?editors=1010 Perhaps you have some problem in the HTML? – Fran Dios Nov 17 '16 at 01:49

0 Answers0