2017-06-29 6 views
0

3つの角度機能があり、検索機能を切り替えることができます。しかし、私はそれらを一度に1つだけ選択できるようにしたい。角度を使用して別のボタンを選択している間はボタンを無効にする

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

私は(ここではdisable the button after one click using ng-disable説明したように)NG-無効を使用することによってこれを解決しようとしたが、それは動作しませんでした。特に、第2の解決策は、第2の「if」ステートメントを追加することによって機能が壊れたことである。これは、不適切な構文を使用している私に起因する可能性があります。

私はまた、機能の範囲の一部としてユーザーの入力を制限しようとしました。 "$ scope.toggleFireSearch.input = false"を追加して誤った構文を使用していた新しいユーザーとして表示される可能性があります。

多分私は間違ったツリーを吠えています。私の問題を解決するための推奨された指令を助言する言葉?

答えて

0

要素タグng-if="VARNAME"を使用して、有効範囲内の変数がtrueであるかどうかを確認できます。各検索要素(または配列)に異なるvarを付けます。次にToggleWhateverSearch()にvarをtrueに設定し、他のすべてをfalseに設定することができます。

関連する問題