How to use jQuery Select2 with angular

2019-02-22 09:56发布

站内问答 / jQuery
406 3 4

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?

3条回答
Anthone
2楼-- · 2019-02-22 10:23

Install via bower "angular-ui-select": "=0.12.1" Then in your html.....

<ui-select multiple
                   class="col-md-8 input-sm"
                   on-select="someMethod()"
                   on-remove="someMethod()"
                   ng-model="country.selected"
                   theme="bootstrap">
            <ui-select-match placeholder="Select field...">{{$item.name}}</ui-select-match>
            <ui-select-choices
                    repeat="field in countries | filter:$select.search">
                <div ng-bind-html="field.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>

Never initialize jQuery plugins directly. Search over internet how to integrate jQuery modules with Angular (it might look bit complicated but it's quite easy. Calling it in the way You did will never works....

<script type="text/javascript">
    $(document).ready(function () {
        $(".sel").select2();
    });
</script>

Alternative for ui-select is: 

angular-chosen ("angular-chosen-localytics": "~1.0.7",)

:)

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
3楼-- · 2019-02-22 10:44

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>
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
4楼-- · 2019-02-22 10:48

Angular Version of Select2 is available. Check Here : https://www.npmjs.com/package/angular-select2

( The Code is here: https://github.com/rubenv/angular-select2 )

This Angular Library uses Select2 as dependency and helps integrating Select2 in your forms.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)