0
私はWebアプリケーション、特にボタンを操作しています。前の停止と次の停止という2つのボタンがあります。 Googleマップにマーカーの配列が表示されています。ボタンの操作は次のマーカーと前のマーカーに移動します。私が問題を抱えているのは、Webアプリケーションの起動時に、アプリケーションが配列の最初の項目で開始するため、前の停止ボタンを無効にしたいということです。配列の最後にも同じことが言えます。次の停止ボタンを無効にします。ボタンを作成するときは、以前の停止時にng-disabledを使用しました。しかし、私はこれを正しく行ったかどうかはわかりません。Ionicを使用してボタンを無効にする
<ion-vieI w view-title="Map" ng-init="getTourMarkers()" hide-tabs>
<!-- <ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>-->
<ion-nav-buttons side="right"> <!-- right -->
<button class="button" ng-disabled="button" ng-click="prevStop()">Previous Stop</button>
<button class="button" ng-click="nextStop()">Next Stop</button>
</ion-nav-buttons>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
私は、ボタンを無効にしたいときの指標として使用する配列を持っていると言いました。私は作成したif文とifとelseが、これはボタンを無効にする正しい方法ではないことを私に伝えます。
.controller('mapCtrl', function ($scope, tourmarkers, $ionicSideMenuDelegate, $ionicPopup) {
$ionicSideMenuDelegate.canDragContent(false);
$scope.getTourMarkers = function() {
tourmarkers.getTourMarkers().success(function (data) {
$scope.tourmarkers = data;
console.log($scope.tourmarkers);
drawMarkers();
});
};
var currentStop = 0;
if (currentStop = 0) {
document.getElementById("button").disabled = true;
}
if else (currentStop = $scope.tourmarkers.length){
document.getElementById("button").disabled = true;
}
$scope.nextStop = function() {
currentStop++;
onSuccessDrawMarker(position);
console.log("moving forward" + currentStop);
}
$scope.prevStop = function() {
currentStop--;
onSuccessDrawMarker(position);
console.log("moving back" + currentStop);
}
///////////////////Directions Display//////////////////////
var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
var directionsService = new google.maps.DirectionsService;
var drawMarkers = function (directionsService, directionsDisplay, marker) {
var markers;
var content;
var infoWindow;
function rad(x) {return x*Math.PI/180;}
var lat = marker.position.lat();
var lng = marker.position.lng();
var R = 6371; // radius of earth in km
var distances = [];
var distancesCopy = [];
var shortest = -1;
for (var i = 0; i < $scope.tourmarkers.length; i++) {
content = '<h2>' + $scope.tourmarkers[i].title + '</h2>' +
'<br />' +
'<p>' +
'</p>';
infoWindow = new google.maps.InfoWindow({
content: content
});
var point = new google.maps.LatLng($scope.tourmarkers[i].lat, $scope.tourmarkers[i].lon);
var mlat = point.lat();
var mlng = point.lng();
var dLat = rad(mlat - lat);
var dLong = rad(mlng - lng);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
distances[i] = d;
distancesCopy[i] = d;
distances.sort();
var stopKey = distancesCopy.indexOf(distances[currentStop]);
markers = new google.maps.Marker({
label: "S",
position: point,
map: map,
info: content
});
//SCOPE: 'this' refers to the current 'markers' object, we pass in the info and marker
google.maps.event.addListener(markers, 'click', function() {
infoWindow.setContent(this.info);
infoWindow.open(map, this);
});
}
var dest_point_lat = ($scope.tourmarkers[stopKey].lat);
var dest_point_lon = ($scope.tourmarkers[stopKey].lon);
var dest_end = new google.maps.LatLng(dest_point_lat, dest_point_lon);
directionsService.route({
origin: marker.position,
destination: dest_end,
travelMode: google.maps.TravelMode.WALKING
}, function(response,status) {
if(status==google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};