gpt4 book ai didi

javascript - 当我们选择表单选择框中的相同选项时如何显示警报

转载 作者:行者123 更新时间:2023-11-28 04:30:31 25 4
gpt4 key购买 nike

当我们从 select 中选择相同的选项时,我需要显示警报(即当前如果我们有 abc 并再次选择相同的选项 abc)。如果我们选择相同的选项,如何显示警报有人可以帮助我使用 Angular 吗?

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

最佳答案

您可以使用ngMouseupngKeypress 一起捕获用户与您的选择的交互。值得一提的是mouseup当 select 打开和关闭时都会触发,因此我们需要使用 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>

关于javascript - 当我们选择表单选择框中的相同选项时如何显示警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44649396/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com