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 に答える