Javascript <；选项>；单击事件角度JS_Javascript_Angularjs_Twitter Bootstrap_Bootstrap Modal

Javascript <；选项>；单击事件角度JS

javascript angularjs twitter-bootstrap

Javascript <；选项>；单击事件角度JS,javascript,angularjs,twitter-bootstrap,bootstrap-modal,Javascript,Angularjs,Twitter Bootstrap,Bootstrap Modal,有没有办法将事件绑定到jquery或angularjs中的选项标记。我特别寻找一个点击事件到一个特定的选项考虑一个例子 <select> <option>Last Month</option> <option>Last Year</option> <option onclick='showDatePicker()'>Custom Range</option> </select>

有没有办法将事件绑定到jquery或angularjs中的选项标记。我特别寻找一个点击事件到一个特定的选项

考虑一个例子

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


上个月
去年
自定义范围

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

重要提示：

我们在模式中显示日期选择器（引导或任何其他），一旦用户选择了关闭模式的日期

可以通过ngChange实现

您需要使用

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>

这是一个正在工作的小提琴：

由于值没有更改，onChange事件没有被触发。一个简单的解决方法是在模式关闭时清除下拉列表的值

因此，在datePicker的select函数的处理程序中，您可以

$（“datePicker”）.clear（）或类似的东西，您不能在

部分中放置任何角度代码

但是，有关第三个选项选择的日期更改场景，请参见以下内容：

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


一个
两个
三
{{selectBox}}
发件人：
致：
//模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.checkIt=function（）{
//在这里为第三个选项编写代码
}
});

使用角度引导的“日期选择器”来使用日期选择器：

如何

ng click

或

ng change

？不，无法在选项元素上绑定click事件。在选择标签或自定义选择框上使用onchange事件。但同样，这正是我所提到的，如果用户选择第三个选项并进行一些日期选择并关闭弹出窗口，然后再次尝试选择第三个选项，该选项已经被选中，因此不会触发任何更改事件，那么我们如何处理它呢。兄弟，只要选择了第三个选项，您的起始日期和截止日期将可见。那么为什么他需要再次选择第三个选项呢。他可以直接更改从开始到现在可见的值。不会吗？不会。因为，我们将在弹出窗口中显示日期选择器，一旦用户选择日期，他就可以关闭弹出窗口（模式）。

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

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