Question

当我们从select中选择相同的选项时，我需要显示警告（即，如果我们有abc，我们再次选择相同的选项abc）。如果我们选择相同的选项，如何显示警报可以帮助我使用角度？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以将$ watch用于此目的。

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

Answer 2

您可以在angularjs中创建一个类似于select选项的自定义下拉列表，并使用它来检测值是否已更改。

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="angular.js@1.5.x" 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>

Answer 3

您可以将ngMouseup与ngKeypress一起使用来捕获用户与您的选择的互动。有一点需要注意的是，mouseup将在打开select和关闭时触发，因此我们需要使用data()来跟踪它。希望这个想法能帮到你：

＆＃13;

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);
    }
  };
  
});

＆＃13;

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

＆＃13;

当我们选择相同的选项形式选择框时如何显示警报

3 个答案: