Question

我对AngularJS非常陌生，所以对我很轻松...... :-)我正在使用Ionic Framework和AngularJS构建一个新的PhoneGap应用程序。我有一个列表视图中输出的位置列表和一个查找用户位置并获取其当前位置与列表中位置之间距离的函数。这些当前都正常工作，我可以看到我的列表，按正常字段（名称等）排序。

我想要的是设置一个首选项屏幕，用户可以在其中设置首选排序选项。我已经设置了我的基本偏好控制器，目前只存储偏好以按名称＆＃39;排序。但是我希望按照下面的函数计算的距离进行排序。但是因为距离函数似乎在这个控制器中，所以我不知道如何对它进行排序？我是否需要制作一个运行距离函数的滤镜？

同样，我是新的，所以任何帮助都会受到高度赞赏！

这是我的控制器：

.controller('LocationsCtrl', function($scope, $ionicLoading, $ionicPopup, LocationsService, SettingsService)     {
  $scope.locations = {};

  $scope.navTitle = "List of Locations";

  $scope.rightButtons =  [{
    type: 'button-icon button-clear ion-more',
    tap: function(e) {
      $scope.openSortModal();
    }
  }];

  // Method called on infinite scroll
  // Receives a "done" callback to inform the infinite scroll that we are done
  $scope.loadMore = function() {
    $timeout(function() {
      // Placeholder for later
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }, 1000);
  }

  $scope.loading = $ionicLoading.show({
    content: 'Getting current location...',
    showBackdrop: false
  });

  navigator.geolocation.getCurrentPosition(function(pos) {
    var coords = $scope.currentLocation = [pos.coords.longitude, pos.coords.latitude];
    $scope.locations = LocationsService.allSync();
    $scope.sortLoc = SettingsService.get('sortLocBy');
    $ionicLoading.hide();
  }, function(error) {
    $ionicPopup.alert({
      title: 'Unable to get location: ' + error.message
    }).then(function(res) {
      $ionicLoading.hide();
      // not working
    });
  });

  $scope.distanceFromHere = function (_item, _startPoint) {
    var start = null;

    var radiansTo = function (start, end) {
      var d2r = Math.PI / 180.0;
      var lat1rad = start.latitude * d2r;
      var long1rad = start.longitude * d2r;
      var lat2rad = end.latitude * d2r;
      var long2rad = end.longitude * d2r;
      var deltaLat = lat1rad - lat2rad;
      var deltaLong = long1rad - long2rad;
      var sinDeltaLatDiv2 = Math.sin(deltaLat / 2);
      var sinDeltaLongDiv2 = Math.sin(deltaLong / 2);
      // Square of half the straight line chord distance between both points.
      var a = ((sinDeltaLatDiv2 * sinDeltaLatDiv2) +
              (Math.cos(lat1rad) * Math.cos(lat2rad) *
                      sinDeltaLongDiv2 * sinDeltaLongDiv2));
      a = Math.min(1.0, a);
      return 2 * Math.asin(Math.sqrt(a));
    };

    if ($scope.currentLocation) {
      start = {
        longitude: $scope.currentLocation[0],
        latitude: $scope.currentLocation[1]
      };
    }
    start = _startPoint || start;

    var end = {
      longitude: _item.location.lng,
      latitude: _item.location.lat
    };

    var num = radiansTo(start, end) * 3958.8;
    return Math.round(num * 100) / 100;
  }
})

这是我的模板：

<ion-view title="{{navTitle}}" left-buttons="leftButtons">
  <ion-content header-shrink scroll-event-interval="5">
    <ion-list class="locations-list">
      <ion-item class="location-item" ng-repeat="loc in locations | orderBy:sortLoc" type="item-text-wrap" href="#/location/{{loc.id}}/details" style="background-image:url('{{loc.photos.0.url}}');">
        <div class="location-title">
          <p>{{loc.name}}</p>
          <span class="distance-indicator"><span class="digit">{{distanceFromHere(loc)}}</span><span class="unit">mi</span></span>
        </div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Answer 1

见the orderBy docs。作为orderBy表达式，您可以使用生成用于排序的值的函数。您需要做的就是将distanceFromHere函数放在sortLoc范围变量中（或将过滤器更改为orderBy:distanceFromHere）。

AngularJS - orderBy距离函数

1 个答案: