Disable Buttons While Another Is Selected Using Angular

Question

I have 3 Angular functions that toggle on search features. However, I only want to be able to select them one at a time.

/* Trauma Search functionality */
$scope.traumaSearch = false;
$scope.traumaText = "Trauma Center";
$scope.toggleTraumaSearch = function() {
  $scope.traumaSearch = !$scope.traumaSearch;
  if ($scope.traumaSearch) {
    $scope.traumaText = "Select a location...";
    canvas.style.cursor = 'crosshair';
  } else {
    $scope.traumaText = "Trauma Center";
    canvas.style.cursor = '';
  }
}

/* Police Search functionality */
$scope.policeSearch = false;
$scope.policeText = "Police Station";
$scope.togglePoliceSearch = function() {
  $scope.policeSearch = !$scope.policeSearch;
  if ($scope.policeSearch) {
    $scope.policeText = "Select a location...";
    canvas.style.cursor = 'crosshair';
  } else {
    $scope.policeText = "Police Station";
    canvas.style.cursor = '';
  }
}

/* Fire Search functionality */
$scope.fireSearch = false;
$scope.fireText = "Fire Station";
$scope.toggleFireSearch = function() {
  $scope.fireSearch = !$scope.fireSearch;
  if ($scope.fireSearch) {
    $scope.fireText = "Select a location...";
    canvas.style.cursor = 'crosshair';
  } else {
    $scope.fireText = "Fire Station";
    canvas.style.cursor = '';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="marker">
  <!-- LOCATION BUTTONS -->
  <h2>Find the Nearest Emergency Services</h2>
  <button class="btn btn-info" ng-click="toggleTraumaSearch()">{{traumaText}} </button>
  <button class="btn btn-info" ng-click="togglePoliceSearch()">{{policeText}}</button>
  <button class="btn btn-info" ng-click="toggleFireSearch()">{{fireText}}</button>
</div>

I tried solving this by using ng-disabled (as explained here disable the button after one click using ng-disable) but that did not work. Especially the second solution, by adding a second "if" statement the function broke. This could be due to me using improper syntax.

I also tried limiting the user's input as part of the scope of the function. It could be as a new user that I was using incorrect syntax by adding "$scope.toggleFireSearch.input = false"

Maybe I am barking up the wrong tree. Any words of advise for a recommended directive to solve my problem?

Answer 1

You can use the element tag ng-if="VARNAME" to check if a variable in your scope is true. Have a different var for each search element (or an array). Then you could have ToggleWhateverSearch() set that var to true and all of the others false.