1

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

我想做的是有一个偏好屏幕，用户可以在其中设置他们喜欢的排序选项。我已经设置了我的基本首选项控制器，目前仅存储按“名称”排序的首选项，但我希望它按距离排序，该距离由下面的函数计算。但是由于距离功能似乎在这个控制器中，我不知道如何让它排序？我需要制作一个运行距离函数的过滤器吗？

同样，我是新手，所以任何帮助将不胜感激！

这是我的控制器：

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

1 回答 1

1

请orderBy参阅文档。作为orderBy表达式，您可以使用生成用于排序的值的函数。您需要做的就是将该distanceFromHere函数放入您的sortLoc作用域变量中（或将过滤器更改为orderBy:distanceFromHere）。

于 2014-04-28T20:25:24.043 回答