order by and click is not working in ng-repeat angular js

Question

ng-repeat to show data from database but my order by predicate,reverse functionality and click is not working

<div ng-repeat="shipment in sortedShipments">
  <div ng-click="show_shipment($index,shipment.shipment_id)" ng-class="{selected_trip: $index === currentShipment}">
     <div>{{shipment.from_location}</div>
  </div>
</div>

here is fetching records from database HTTP request and sorting code

$http.get(url+'/get-shipments').success(function(data){
  $scope.shipments = data;
  $scope.sortedShipments = $filter('orderBy')($scope.shipments, 'predicate', true);
  $scope.currentShipment = 0;
  $scope.sortType  = 'shipment_id';
  $scope.predicate = 'created_at';
  $scope.reverse = false;
});

for click functionality i have two button to move to next shipment div using selected index and previous button

<a class="" ng-click="next($event)"  href="#">next</a>
<a class="" ng-click="previous($event)"  href="#">previous</a>

and angular js code is

$scope.next = function($event) {
  if ($scope.currentShipment < $scope.sortedShipments.length - 1) {
       $scope.currentShipment++;
       $('.selected_trip').click();
  }
};
$scope.previous = function($event) {
  if ($scope.currentShipment > 0) {
      $scope.currentShipment--;
      $('.selected_trip').click();
  }
};

the problem is it goes to next item add selected_trip class on it but i also want to trigger a click on selected class so that it can call this function on the selected row ng-click="show_shipment($index,shipment.shipment_id)" but currently $('.selected_trip').click(); this is giving me error i have also tried this to

document.querySelector('.selected_trip').click();

here is show_shipment method

 $scope.show_shipment = function(index,id) {
        $scope.setSelected(index); 
        $http.get(url+'/get-shipments/'+id).success(function(data){
           $scope.to_location = data[0]['to_location'];
        })
})

Here is my code for order by which is not working when i started to use the $filter option in js

 $scope.order = function(predicate) {
      $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
      $scope.predicate = predicate;
    };

You should not do this $('.selected_trip').click();. This will not guarantied to work, as well as document.querySelector('.selected_trip').click();. — dfsq
– dfsq, Commented Nov 28, 2015 at 6:51
yes it is a function which show the data of selected shipment in the other tab — Muhammad Usama Mashkoor
– Muhammad Usama Mashkoor, Commented Nov 28, 2015 at 8:03

michelem · Accepted Answer · 2015-11-28 18:17:11Z

0

You should use angular.element and trigger method:

So this: $('.selected_trip').click();

Becomes: angular.element('.selected_trip').trigger('click');

And it should work.

EDIT:

You should also use $timeout as workaround because you are in a $digest yet and you cannot call $apply again and this is why you get those errors.

I made a JSFiddle to explain you the use of $timeout:

app.controller('dummy', function ($scope, $timeout) {
    $scope.test = function () {
        $timeout(function() {
            angular.element('.selected_trip').trigger('click');
        }, 0, false);
    }

    $scope.show_shipment = function () {
        $scope.clicked = "hello world";
    };
});

More info here: https://docs.angularjs.org/error/$rootScope/inprog?p0=$apply

edited Nov 28, 2015 at 18:17

answered Nov 28, 2015 at 8:14

michelem

14.6k5 gold badges55 silver badges67 bronze badges

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

6 Comments

Muhammad Usama Mashkoor Over a year ago

sorry for the late reply but it is not working it is giving me this error Error: [$rootScope:inprog] errors.angularjs.org/1.4.7/$rootScope/inprog?p0=%24apply at Error (native)

michelem Over a year ago

That could be a problem with the show_shipment() method but you didn't post it

michelem Over a year ago

Try to do only a console.log('hello') in show_shipment and it should work

Muhammad Usama Mashkoor Over a year ago

i have posted the show_shipment() method in answer when the page by defaults loads it prints the hello in console but when we trigger the click using angualr it give me 3 errors in console Error: [$rootScope:inprog] errors.angularjs.org/1.4.7/$rootScope/inprog?p0=%24apply Error: [$rootScope:inprog] errors.angularjs.org/1.4.7/$rootScope/inprog?p0=%24apply Error: [$rootScope:inprog] errors.angularjs.org/1.4.7/$rootScope/inprog?p0=%24apply

Muhammad Usama Mashkoor Over a year ago

Thanks @Michelem but also my order by is not working as i have asked for helped for that to in my question could you please kindly help me on that part to why it is not working

|

Collectives™ on Stack Overflow

order by and click is not working in ng-repeat angular js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related