CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapbootstrap-modal
Manish Rawat
Manish Rawat

Reputation: 1212

<option> click event angularjs

Is there any way to bind an event to option tag in jquery or angularjs. I am specifically looking for a click event to a specific option.

Consider an example here

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

I have a select dropdown in which there are three options, first two are simple whereas the thirdone is little complicated. Whenever a user chooses the Custom Range (option 3) then I need to show a bootstrap model in which I place a bootstrap custom datepicker. I can make it work by adding a change event handler to select element but then the issue arises that what if the user selects the Ccustom Range option and choose the date using datepicker and close the modal. And after that the user tries to select Custom Range option again to let say change the selected date range. Then this change event won't trigger and thus the bootstrap modal won't showup.

Important Note: We are showing the datepicker (bootstrap or any other) in a modal and once user selects the date that modal will be closed.

Upvotes: 2

Views: 8717

Answers (4)

Deadpool
Deadpool

Reputation: 8240

You cannot put any angular code in the <option> part.

However for your scenario of date change on third option selection see the following: 

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

Use 'datepicker' of Angular Bootstrap for using datepickers:

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

Upvotes: 0

S.V.
S.V.

Reputation: 1221

The onChange event isn't being triggered because the value didn't change. A simple workaround would be for the value of the dropdown to be cleared if the modal is closed.

So in the handler for your datePicker's select function, you could have like $("datePicker").clear() or something like that

Upvotes: 0

trollr
trollr

Reputation: 1115

You need to use ngChange

Template:

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

Controller:

function MyCtrl($scope) {
  $scope.isClicked = false;
  $scope.value = 'month';

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

Here is a working fiddle: http://jsfiddle.net/trollr/ugfbo9x2/

Upvotes: 4

Jairo Malanay
Jairo Malanay

Reputation: 1347

it is possible to implement it via 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>

then handle it via the select_value

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

Upvotes: 0

Related Questions