當我們選擇相同的選項形式選擇框時，如何顯示警報

當我們從select中選擇相同的選項時（即現在如果我們有abc並且我們再次選擇相同的選項abc），我需要顯示警報。如果我們選擇相同的選項，如何顯示警報，任何人都可以幫助我使用角度？當我們選擇相同的選項形式選擇框時，如何顯示警報

$scope.myChangeFunction = function(newValue) { 
 
    if ($scope.mySelectedOption === 'abc') { 
 
    alert("myChangeFunction if"); 
 
    return 
 
    } else { 
 
    alert("myChangeFunction else"); 
 
    return 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
 
<select ng-change="myChangeFunction(mySelectedOption)" ng-model="mySelectedOption"> 
 
    <option>abc</option> 
 
    <option>raj</option> 
 
    <option>jai</option> 
 
    <option>abcd</option> 
 
</select>

來源

2017-06-20 raj

你的意思是用鼠標選擇相同的選項？ –

可以一起使用ngMouseup與ngKeypress捕捉與您選擇的用戶交互。有一點要提到的是，mouseup將在選擇打開和關閉時觸發，因此我們需要使用data()來跟蹤這個。希望這個想法將幫助您：

angular.module('plunker', []) 
 
.controller('MainCtrl', function($scope) { 
 

 
    $scope.mySelectedOption = $scope.prevSelected = 'raj'; //initialize selected option 
 
    
 
    $scope.trackSelect = function(option, $event){ 
 
    var target = angular.element($event.target); 
 
    var isOpened = target.data("isOpened"); 
 
    if(isOpened) { 
 
     if (option !== $scope.prevSelected) { 
 
      $scope.prevSelected = option; //if not the same - update previous selected 
 
     } else { 
 
      alert('Value is the same!'); //if the same then show alert 
 
     } 
 
    } 
 
    target.data("isOpened", !isOpened); 
 
    }; 
 
    
 
    $scope.trackKeyUp = function(option, $event) { 
 
    if ($event.keyCode === 13) { 
 
     $scope.trackSelect(option, $event); 
 
    } 
 
    }; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.angularjs.org/1.6.2/angular.js" ></script> 
 

 
<html ng-app="plunker"> 
 
    <body ng-controller="MainCtrl"> 
 
    
 
    <select 
 
     ng-keypress="trackKeyUp(mySelectedOption, $event)" 
 
     ng-mouseup="trackSelect(mySelectedOption, $event)" 
 
     ng-model="mySelectedOption" 
 
     ng-options="o for o in ['abc', 'raj', 'jai', 'abcd'] track by o"> 
 
    </select> 
 

 
    </body> 
 
</html>

來源

2017-06-20 10:42:05

非常感謝Stanisalv對我來說工作得很好，非常感謝您的寶貴信息。 – raj

@raj很高興幫助！如果它適合你，你可以接受答案。 –

我接受了謝謝.. – raj

您可以使用$觀看此目的。

$scope.$watch($scope.mySelectedOption,function(newValue,oldValue){ 
     if(newValue == oldValue) 
      alert("same value selected") 
    })

來源

2017-06-20 09:52:10

如果您選擇相同的選項，則不會觸發'watch'。 –

我不認爲你可以在angularjs中檢測到它的值不變 – user93

您可以在angularjs中創建一個自定義下拉菜單，看起來像選擇選項，並使用它來檢測值是否已更改。

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.mySelectedOption = 'abc'; 
 
    $scope.myChangeFunction = function(old, val) { 
 
    console.log('val', old, val) 
 
    } 
 

 
    $scope.options = ['jai', 'raj', 'abc']; 
 
    $scope.showdrop = false; 
 

 
    $scope.toogelDrop = function() { 
 
    $scope.showdrop = !$scope.showdrop; 
 
    } 
 

 
    $scope.selected = $scope.options[0]; 
 
    $scope.selectDrop = function(index) { 
 
    if ($scope.selected === $scope.options[index]) { 
 
     console.log('same selection') 
 
    } 
 
    $scope.selected = $scope.options[index]; 
 

 
    } 
 
});

/* Put your css in here */ 
 

 
.dropdown { 
 
    border: 1px solid; 
 
    width: 50px; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown div:hover { 
 
    background: #f2f2f2; 
 
    cursor: pointer; 
 
}

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 

 
    <div class="dropdown" ng-click="toogelDrop()"> 
 
    <div ng-if="!showdrop">{{selected}}</div> 
 

 
    <div ng-if="showdrop" ng-repeat="option in options track by $index"> 
 
     <div ng-click="selectDrop($index)">{{option}}</div></div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-06-20 09:52:16 user93

請刪除downvote，如果它有助於答案編輯 – user93

好方法。有一點需要改進的是增加鍵盤支持:) –

非常感謝你幫助我Stanislav工作正常，但它只適用於定製。 – raj

當我們選擇相同的選項形式選擇框時，如何顯示警報

回答

相關問題