jquery - 如何将 jQuery Select2 与 AngularJS 结合使用

标签 jquery angularjs jquery-select2 angularjs-select2

我正在尝试将 jQuery (2.2.1) Select2 (3.5.2) 与 Angularjs (1.5) 一起使用,但很难从选择框中获取数据。我已经尝试过ui-select我可以检索数据...但搜索时浏览器经常崩溃,速度非常慢并且总体不稳定(5000-10000 项)。 jQuery Select2 快速且响应灵敏,即使有大量条目,但当我选择一个选项时,我似乎无法获取对象。

<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'
    }];

}]);

有没有办法让这两个很好地工作?

最佳答案

在搜索如何从 jQuery 访问 $scope 函数之后,我发现使用 angular.element.scope().function(x) 将允许我在“change”事件上传递每个 select2 元素的 key ,转换为 Angular ,然后可以对其进行操作。

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

关于jquery - 如何将 jQuery Select2 与 AngularJS 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36134187/

相关文章:

javascript - jQuery - 选择一组 hrefs 以特定字符串结尾的链接

json - select2 搜索 json 结果不起作用

javascript - 我正在将 ajax 请求传递到另一个远程服务器以获取访问记录

javascript - 如何根据 ajax 响应隐藏图像标签?

javascript - jQuery 高度计

jquery - 将 Select2 应用到 Slickgrid 编辑器

javascript - Select2 多选重复值

AngularJS:如何根据自定义 bool 值设置有效性

javascript - 资源解释为脚本,但在注入(inject) angular-route.map 时以 MIME 类型 text/html 传输

javascript - AngularJS ng-repeat 不列出数据