Disabling button using Ionic

Question

I'm working on an web application and specifically buttons. I have two buttons called previous Stop and Next Stop. I have google map being populated by an array of markers. what the buttons do is go to the next marker and previous marker. what I am having trouble with is that when the the web application starts I want the previous stop button to be disabled because the application starts on the first item in the array. The same is true for the end of the array, I want the next stop button to be disabled. When creating the buttons I used the ng-disabled in the previous stop. But i don't know if i did this correctly.

So, like i said I have an array that I want to use as the indicator for when i want to disable the buttons. I created and if statement and and if else but something tells me that this is not the correct way to disable the buttons.

.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 = '' + $scope.tourmarkers[i].title + '' +
                '
' +
                '' +

                '';

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

    };

Disabling button using Ionic

Answers (1)

Related Questions