<option> click olayı angularjs

Bir olayı jquery veya angularjs'de seçenek etiketine bağlamanın bir yolu var mı? Özellikle belirli bir seçeneğe yönelik bir tıklama etkinliği arıyorum. <option> click olayı angularjs

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

Ben thirdone biraz karmaşık ise iki ilk üç seçenek, basit birer yapıya sahip olan bir seçme açılan var Burada bir örnek ele alalım. Bir kullanıcı Özel Aralığı (seçenek 3) seçtiğinde, o zaman bir bootstrap özel bir tarih seçici yerleştirdiğim bir bootstrap modeli göstermem gerekir. Öğeyi seçmek için bir değişiklik olayı işleyicisi ekleyerek çalışabilirim ancak sonra kullanıcı Ccustom Range seçeneğini seçerse ve tarihçeyi kullanarak tarihi seçip modal'ı kapatırsa sorun ortaya çıkar. Bundan sonra, kullanıcı seçilen tarih aralığını değiştirmeye izin vermek için Özel Aralık seçeneğini tekrar seçmeye çalışır. Daha sonra bu değişiklik olayı tetiklenmeyecek ve böylece bootstrap modları gösterilmeyecektir.

Önemli Not: Bir modda tarih seçiciyi (önyükleme ya da başka bir) gösteriyoruz ve kullanıcı modalın kapatılacağı tarihi seçtikten sonra.

kaynak

2016-04-12 Manish Rawat

nasıl ng-click' veya 'ng-change' hakkında –

Hayır, seçenek öğesinde tıklama olayını bağlamak mümkün değildir. Select etiketinde veya özel selectbox'ta onchange olayı kullanın. – dfsq

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

sonra select_value yoluyla ele aracılığıyla uygulamak ngChange mümkündür

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

Sen ngChange

Şablon kullanmak gerekir

kaynak

2016-04-12 09:30:45 kiro112

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

Denetleyici: Burada

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

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

bir çalışma keman olduğunu: http://jsfiddle.net/trollr/ugfbo9x2/

kaynak

2016-04-12 09:32:28 trollr

değiştiğinde olay değeri değişmedi çünkü tetiklenen değildir. Basit bir çözüm, modalın kapalı olması durumunda açılır listenin değeri için yapılacaktır.

Yani DatePicker en seçkin işlevi için işleyicisinde, lütfen <option> kısmında herhangi açısal kod koyamazsınız

kaynak

2016-04-12 09:35:34 DrSatan1

gibi $ ("DatePicker"). Berrak() veya bir şey gibi olabilir. kullanarak datepickers için Açısal Bootstrap

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

Kullan 'datepicker':

Ancak Üçüncü seçenek seçimine tarih değişikliği senaryonuz için aşağıdakilere bakın

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

kaynak

2016-04-12 09:42:42 Deadpool

Ama yine de, bu, 3. seçenek kullanıcı seçtiğinde ve bir tarih seçimi yapıp açılır pencereyi kapattıktan sonra, daha sonra seçili olan 3. seçeneği tekrar seçmeye çalıştıktan sonra değişiklik olayının patlak vermemesinden bahseder. aynısını nasıl halledebiliriz. –

Bro, üçüncü seçenek seçildiği sürece, sizden bugüne kadar görünür olacak. O zaman neden tekrar üçüncü seçeneği seçmesi gerekiyor? Değerleri doğrudan görülebilir ve güncel olarak değiştirebilir. kazandı ? – Deadpool

Hayır. Çünkü, bir açılır pencerede tarihçiyi ve kullanıcı açılır pencereyi (modal) kapatabileceği tarihi seçer girmez göstereceğiz. –

<option> click olayı angularjs

cevap

İlgili konular