javascript - 使用 Ionic 禁用按钮

Question

我正在开发一个网络应用程序，特别是按钮。我有两个按钮，称为上一站和下一站。我的谷歌地图由一系列标记填充。这些按钮的作用是转到下一个标记和上一个标记。我遇到的问题是，当 Web 应用程序启动时，我希望禁用上一个停止按钮，因为应用程序从数组中的第一项启动。数组末尾也是如此，我希望禁用下一个停止按钮。创建按钮时，我在上一站中使用了 ng-disabled。但我不知道我这样做是否正确。

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

所以，就像我说的，我有一个数组，我想将其用作当我想禁用按钮时的指示器。我创建了 and if 语句以及 and 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);
                    }
                });

    };

Answer 1

是的，你做对了。但您使用的是单个赋值运算符而不是双 == 比较器。以下代码将减少您的代码。

将 currentStop 设置为 $scope 变量并放入以下代码。

<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="currentStop == 0"ng-click="prevStop()">Previous Stop</button>
        <button class="button"  ng-disabled="tourmarkers.length-1 == currentStop" ng-click="nextStop()">Next Stop</button> 
    </ion-nav-buttons>
    <ion-content>
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</ion-view>