<option> click event angularjs

Есть ли способ связать событие с тегом параметра в jquery или angularjs. Я специально ищу событие click для определенной опции.<option> click event angularjs

Рассмотрим пример здесь

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

У меня есть выберите выпадающее меню, в котором есть три варианта, первые два просты, тогда как thirdone немного сложнее. Всякий раз, когда пользователь выбирает пользовательский диапазон (вариант 3), мне нужно показать модель начальной загрузки, в которой я помещаю пользовательский фидпик. Я могу заставить его работать, добавив обработчик события изменения для выбора элемента, но затем возникает вопрос, что, если пользователь выбирает параметр Ccustom Range и выбирает дату с использованием datepicker и закрывает модальный. И после этого пользователь снова попытается выбрать параметр «Пользовательский диапазон», чтобы можно было изменить выбранный диапазон дат. Тогда это событие изменения не будет срабатывать, и, таким образом, мода bootstrap не будет отображаться.

Важное примечание: Мы показываем datepicker (bootstrap или любой другой) в модальном режиме, и как только пользователь выбирает дату, когда модальность будет закрыта.

источник

2016-04-12 Manish Rawat

Как о 'ng-click' или' ng-change'? –

Нет, невозможно связать событие click с элементом опции. Используйте событие onchange в теге select или пользовательском selectbox. – dfsq

можно реализовать с помощью 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 
    } 
}

источник

2016-04-12 09:30:45 kiro112

Вы должны использовать 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/

источник

2016-04-12 09:32:28 trollr

Событие OnChange это не срабатывает, потому что значение не изменилось. Простым обходным решением было бы сбросить значение выпадающего списка, если модальная функция закрыта.

Так в обработчике выбора функции вашего Datepicker, вы могли бы иметь как $ («Datepicker»). Ясно() или что-то вроде этого

источник

2016-04-12 09:35:34 DrSatan1

Вы не можете поместить любой угловой код в <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>

Используйте 'DatePicker' углового Bootstrap для использования datepickers:

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

источник

2016-04-12 09:42:42 Deadpool

Но это именно то, о чем я упомянул, что если пользователь выбирает третий вариант и делает выбор даты и закрывает всплывающее окно, и после этого попытается снова выбрать третий вариант, который уже выбран, и, таким образом, событие изменения не срабатывает чем мы можем справиться с этим. –

Bro, до тех пор, пока выбран третий вариант, вы увидите и отныне. Так почему он должен будет выбрать третий вариант снова. Он может изменять значения непосредственно на видимом с и до настоящего времени. выиграл ? – Deadpool

Нет. Потому что мы собираемся отображать датупик в всплывающем окне, и как только пользователь выбирает дату, он может закрыть всплывающее окно (модальное). –

<option> click event angularjs

ответ

Смежные вопросы