如何在AngularJS中使用jQuery Select2 [英] How to use jQuery Select2 with AngularJS
问题描述
我正在尝试将jQuery(2.2.1)Select2(3.5.2)与Angularjs(1.5)结合使用，但是很难从选择框中获取数据.我已经尝试过 ui-select ，但我可以检索数据...但是经常会崩溃浏览器时，速度非常慢，总体不稳定(5000-10000个项目). jQuery Select2快速且响应迅速，即使有大量的条目，但是当我选择一个选项时，我似乎无法获得对象.
I am trying to use jQuery (2.2.1) Select2 (3.5.2) with Angularjs (1.5) but am having a difficult time grabbing the data from the select box. I have tried ui-select and I could retrieve data... but would often crash the browser when searching, was horribly slow and overall unstable (5000-10000 items). jQuery Select2 is fast and responsive, even with the large number of entries, but I cant seem to get the object when I select an option.
<head>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/CustomScripts/app.js"></script>
<script src="~/Scripts/jquery-2.2.1.js"></script>
<script src="~/Scripts/select2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".sel").select2();
});
</script>
<head>
<body ng-app="app" ng-controller="MainCtrl">
<select class="sel" data-ng-model="country.selected" ng-options="country.Name for country in countries | orderBy: 'Name'">
<body>
app.js
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.country = {};
$scope.countries = [{
name: 'Australia',
}, {
name: 'United States'
}, {
name: 'United Kingdom'
}];
}]);
有没有办法使这两个工作正常?
Is there a way to get these two working nicely?
推荐答案
搜索了如何从jQuery访问$ scope函数之后，我发现使用angular.element.scope().function(x)可以让我通过在更改"事件中，每个select2元素的键都变成角度，然后可以对其进行操纵.
After searching how to access $scope functions from jQuery, I found that using the angular.element.scope().function(x) would allow me to pass the key for each select2 element, on the "change" event, into angular, which can then be manipulated.
<script type="text/javascript">
$(document).ready(function () {
$(".sel").select2({
placeholder: "Select a project..."
})
.on("change", function (e) { angular.element(document.getElementById("MainCtrl")).scope().testfunction(); });
});
</script>
这篇关于如何在AngularJS中使用jQuery Select2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
