【问题标题】:order by and click is not working in ng-repeat angular js按顺序单击并在 ng-repeat angular js 中不起作用
【发布时间】:2015-11-28 06:38:04
【问题描述】:

ng-repeat 显示数据库中的数据,但我的谓词顺序、反向功能和单击不起作用

<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>

这里是从数据库HTTP请求中获取记录和排序代码

$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;
});

对于点击功能,我有两个按钮可以使用选定的索引和上一个按钮移动到下一个发货 div

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

而 Angular js 代码是

$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();
  }
};

问题是它转到下一项添加 selected_trip 类,但我也想触发对选定类的点击,以便它可以在选定行上调用此函数ng-click="show_shipment($index,shipment.shipment_id)" 但目前$('.selected_trip').click(); 这给了我错误 我也试过这个

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

这里是 show_shipment 方法

 $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'];
        })
})

这是我的订单代码,当我开始在 js 中使用 $filter 选项时,该代码不起作用

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

【问题讨论】:

  • 你不应该这样做$('.selected_trip').click();。这不会保证工作,以及document.querySelector('.selected_trip').click();
  • @dfsq 那我应该用什么
  • show_shipment 是在你的控制器中定义的函数吗?
  • 是的,它是一个在另一个选项卡中显示所选货件数据的功能

标签: javascript jquery angularjs


【解决方案1】:

你应该使用angular.elementtrigger方法:

所以这个:$('.selected_trip').click();

变成:angular.element('.selected_trip').trigger('click');

它应该可以工作。

编辑

您还应该使用$timeout 作为解决方法,因为您还处于$digest 中,并且您不能再次调用$apply,这就是您收到这些错误的原因。

我发了JSFiddle给大家讲解$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";
    };
});

更多信息在这里:https://docs.angularjs.org/error/$rootScope/inprog?p0=$apply

【讨论】:

猜你喜欢
  • 2016-12-01
  • 1970-01-01
  • 2014-11-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-03-06
  • 1970-01-01
相关资源
最近更新 更多