0

I am using this to repeat rows after col-* from ng repeat.

Now to take this one step further and handle an additional code I would like to handle the splitting with $(window).width() within the controller, but I couldn't achieve doing so...

Here is Plunker demo of what I've done. I've commented the if condition which is not working for now.

Can anyone help me out please?

Community
  • 1
  • 1
Joystan Fernandes
  • 203
  • 4
  • 15

2 Answers2

2

You don't need to use Angular, jQuery and JavaScript as a whole for setting up the number of items which will be shown on a different resolutions. This is a CSS issue.
Besides that you can use jQuery in Angular in a directive, not in the controller. The controller is not used for DOM manipulations as in it, it has to be the business logic for a specific module.
Angular has a build-in angular.element which (if jQuery is available), is an alias for jQuery function. It wraps a raw DOM element or HTML string as a jQuery element. If jQuery's not available, angular.element delegates to AngularJS's built-in subset of jQuery, called jQuery lite or jqLite.
You can read more information about using jQuery in Angular here.

$window

is Angular service which reference to the browser's window object. You should inject it into the controller in order to use it in your controller's functions.

Petya Naumova
  • 727
  • 2
  • 11
  • 23
1

you need to watch the window resize event with jquery, this is what you need

$(window).resize(function(){


    $scope.$apply(function(){
       if ($(window).width() >= 990){   
        $scope.teamMembers = $scope.chunk($scope.allMembers, 4);
     } else if ($(window).width() <= 991)  {
        $scope.teamMembers = $scope.chunk($scope.allMembers, 2);
         }
    });
  });

Plnkr

amansinghgusain
  • 764
  • 5
  • 17