同じオプションフォームを選択したときに警告を表示する選択ボックス

選択肢から同じオプションを選択すると警告が表示されます（現在は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

あなたがマウスを使って同じオプションを選択することを意味しますか？ –

あなたはあなたの選択でユーザーとの対話をキャプチャするためにngKeypressと一緒ngMouseupを使用することができます。言い換えれば、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

ニースアプローチ。改善すべき点の1つは、キーボードサポートを追加することです。 –

Stanislavをうまくやってくれてありがとうございますが、それはカスタマイズのためだけの作業です。 – raj

同じオプションフォームを選択したときに警告を表示する選択ボックス

答えて

関連する問題