Angular: как добавить изменение события на select (выпадающий список jQuery-UI select)?

Question

Angular: как добавить изменение события на select (выпадающий список jQuery-UI select)?

0

HTML:

<select style='width:60px;' combobox>
     <option ng-repeat='item in sizePriceWeighArr' value='{{ item.id }}' price='{{ item.price }}' weight='{{ item.weight }}' size='{{ item.size }}'>{{ item.size }}</option>
</select>

JS:

.controller('productController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {
    // Some code here to form array of products
    $scope.sizePriceWeighArr = productObj.sizePriceWeigh;
}])
.directive('combobox', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $(element).combobox();                              
        }
    }
})

В директиве я формирую список jQuery-UI combobox. Но мне нужно как-то уловить событие изменения при выборе, на контроллере или в директиве.

Darien Fawkes 20 окт. 2015, в 22:56

Теги:

jquery

1 ответ

Ещё вопросы

Paul Stanley · Answer 1 · 2015-10-20T18-14-00.000Z

Вы в настоящее время используете select, поэтому почему бы просто не использовать ngChange:

<select style='width:60px;' combobox ng-change="changeFunction()">
<option ng-repeat='item in sizePriceWeighArr' value='{{ item.id }}' 
price='{{ item.price }}' weight='{{ item.weight }}' size='{{ item.size }}'>    
{{ item.size }}</option>
</select>

ЯШ:

.controller('productController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {
// Some code here to form array of products
$scope.sizePriceWeighArr = productObj.sizePriceWeigh;

function changeFunction(){
    //your code.
}
}])
.directive('combobox', function() {
return {
    restrict: 'A',
    link: function($scope, element, attrs) {
        $(element).combobox();                              
    }
}
})

Ошибка: [$ compile: ctreq] errors.angularjs.org/1.4.6/$compile/…
Проблема: если я добавляю ng-change + ng-model, это не работает, потому что плагин combobox jquery-ui генерирует новый html и устанавливает на дисплее выбора: ни один стиль. Если вы ожидаете элемент в браузере и удаляете display: none style, вы увидите select на странице. И когда вы попытаетесь изменить значение, используя html, который генерирует плагин комбинированного списка jquery-ui, вы увидите, что в native select значение также изменяется, но функция ng-change не выполняется.