I am facing a challenge with my Angular functions that enable search features. My goal is to allow only one feature to be selected 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 attempted to address this issue by using ng-disabled (referenced in disable the button after one click using ng-disable) but encountered difficulties. The second solution, involving an additional "if" statement, caused the function to malfunction, possibly due to incorrect syntax on my part.
Another approach I tried was restricting user input within the function's scope. It is possible that my attempt to achieve this with "$scope.toggleFireSearch.input = false" was misguided due to syntax errors.
If you have any suggestions for directives that could effectively solve my dilemma, I would greatly appreciate your advice.