Как открыть программный выбор

Кто-нибудь знает, можно ли открыть программный вариант в угловых. Ive попробовал

angular.element(el).trigger('focus');
angular.element(el).trigger('click');
angular.element(el).trigger('mousedown');

Ничего не работает.

Я также пробовал

$scope.doSomething = function(){
    setTimeout(function() {
        var el = document.getElementById('test');
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = el.dispatchEvent(e);
    }, 0);

}

Вышеуказанный набор фокуса, но не открывайте его.

Возможно ли это?

Ответы

Ответ 1

Попробуйте это для Hover:

JS:

$(document).ready(function(){
$("#selectId").hover(function(){
   $(this)[0].size=$(this).find("option").length;
});
$("#selectId").click(function(){
   $(this)[0].size=0;
});
});

HTML:

<select id="selectId">
  <option>Volvo</option>
  <option >Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

Ответ 2

попробуйте это

function openSelect(selectId) {
    var event = new MouseEvent('mousedown', {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });
    var cb = document.getElementById(selectId);
    cb.size=4;
    cb.dispatchEvent(event);
}
openSelect("testId");

Ответ 3

Ответ haste не работает:

var cb = element[0].getElementsByClassName('some-selector')[0];
var event = new MouseEvent('mousedown', {
    'view': window,
    'bubbles': true,
    'cancelable': true
});                        
cb.dispatchEvent(event);

Я использую более простой метод:

var cb = element[0].getElementsByClassName('some-selector')[0];
angular.element(cb).triggerHandler('click');

Ответ 4

У меня была такая же проблема, и, наконец, я создал свою собственную директиву:

angular.module('openselect', [])
    .directive('openselect', function () {
        var showDropdown = function (element) {
            var event;
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('mousedown', true, true, window);
            element.dispatchEvent(event);
        };
        return {
            restrict: 'A',
            scope: {
                'elemento': '@'
            },
            link: function (scope, elem, attrs, ctrl) {
                elem.bind('click', function () {
                    var elemento = document.getElementById(scope.elemento);
                    showDropdown(elemento);
                });
            }
        };
    });

Для использования:

<div style="position:relative">
<span ng-show="submittedForm.contry.$error.required && co_form.contry.$error.required" class="label label-danger">Indicanos tu país</span>
<select name="country" class="form-control input-md" ng-model="formCheckout.country" id="myCountry" placeholder="España" required>
    <option value="6" selected="selected">España</option>
    <option value="1">Alemania</option>
    <option value="15">Portugal</option>
</select>
<span class="glyphicon glyphicon-chevron-down" style="position: absolute; right: 10px; color: #A6A6A6; top: 18px;" openselect elemento="myCountry"></span>

Добавляет директиву в любой тег, передающий идентификатор select (elemento), который вы хотите открыть.

Вы можете увидеть самый основной код javscript внутри директивы, если вы хотите использовать в другом контексте;

надеюсь, что это поможет; D