<选项>单击eventangularjs

<option> click event angularjs

本文关键字：eventangularjs 单击 选项 lt gt      更新时间：2024-05-18

是否有任何方法可以将事件绑定到jquery或angularjs中的选项标记。我特别想找一个特定选项的点击事件。

考虑这里的一个例子

<select>
    <option>Last Month</option>
    <option>Last Year</option>
    <option onclick='showDatePicker()'>Custom Range</option>
</select>

我有一个选择下拉列表，其中有三个选项，前两个很简单，而第三个则有点复杂。每当用户选择Custom Range（选项3）时，我都需要显示一个引导模型，在该模型中放置一个引导自定义日期选择器。我可以通过添加一个更改事件处理程序来选择元素来实现它，但问题来了，如果用户选择"自定义范围"选项并使用日期选择器选择日期并关闭模式，该怎么办。之后，用户再次尝试选择"自定义范围"选项，例如更改所选日期范围。那么这个更改事件就不会触发，因此引导模式也不会出现。

重要提示：我们以模式显示日期选择器（引导程序或任何其他），一旦用户选择了日期，该模式将关闭。

您需要使用ngChange

模板：

<select ng-change="showDatePicker()" ng-model="value">
  <option value="month">Last Month</option>
  <option value="year">Last Year</option>
  <option value="custom">Custom Range</option>
</select>

控制器：

function MyCtrl($scope) {
  $scope.isClicked = false;
  $scope.value = 'month';
  $scope.showDatePicker = function() {
    if($scope.value == 'custom') {
      $scope.isClicked = true;
    } else {
      $scope.isClicked = false;
    }
  }
}

这是一把正在工作的小提琴：http://jsfiddle.net/trollr/ugfbo9x2/

可以通过ngChange实现

<select ng-model="select_value" ng-change="changeSelect()">
    <option value="">Last Month</option>
    <option value="">Last Year</option>
    <option value="showDatePicker">Custom Range</option>
</select>

然后通过select_value进行处理

$scope.changeSelect = function() {
    if ($scope.select_value === 'showDatePicker') {
        // Execute datepicker here
    }
}

onChange事件没有被触发，因为值没有更改。一个简单的解决方法是，如果模态关闭，则清除下拉列表的值。

因此，在datePicker的select函数的处理程序中，您可以$（"datePicker"）.clear（）或类似的东西

不能在<option>部分中放入任何角度代码。

然而，对于第三个选项选择的日期更改场景，请参见以下内容：

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <select ng-model="selectBox" ng-change="checkIt()">
        <option>One </option>
        <option>Two </option>
        <option>Three</option>
    </select>
    <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker>
    {{selectBox}} 
    <div ng-show="selectBox=='Three'">
    From: <input type="text" placeholder="fromDate" /> 
    To: <input type="text" placeholder="toDate" />
    </div>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){
        $scope.checkIt = function(){
            //write the code here for third selection
        }
    });
    </script> 
</body> 
</html>

使用Angular Bootstrap的"日期选择器"使用日期选择器：

https://angular-ui.github.io/bootstrap/#/datepicker

相关文章：