如何使用角度的jQuery Select2

我正在嘗試使用jQuery（2.2.1）Select2（3.5.2）和Angularjs（1.5），但是我很難從選擇框中獲取數據。我嘗試過ui-select，我可以檢索數據......但是在搜索時經常會使瀏覽器崩潰，速度非常慢並且總體不穩定（5000-10000項）。即使有大量的條目，jQuery Select2也是快速響應的，但是當我選擇一個選項時，我似乎無法獲得對象。如何使用角度的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' 
    }]; 

}]);

有沒有辦法讓這兩個很好的工作？

來源

2016-03-21 Alex

https://github.com/angular-ui/ui-select –

我已經實現了這一點，但在大型列表中，它變得很慢，並且會定期崩潰瀏覽器。 – Alex

有多大？我認爲長列表和角度組合並不是最佳選擇。這意味着任何角度的插件都會被粉碎。嘗試將搜索移至服務器。 –

搜索如何從jQuery的訪問$示波器功能後，我發現，使用angular.element.scope（）函數（x）的，可以讓我通過按鍵對每個選擇2元素，在「變化」事件中，變成角度，然後可以被操縱。

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

來源

2016-04-12 13:36:47 Alex

你可以分享工作JSFIDDLE只是爲演示？ –

通過亭子「角UI，選擇」安裝「= 0.12.1」然後在你的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>

不要直接初始化jQuery插件。搜索互聯網如何將jQuery模塊，集成角（它可能看起來有點複雜，但它很容易在路上你做永遠的作品調用它....

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

替代了UI的選擇是：

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

來源

2016-03-21 15:45:16 qwetty

ui-select無法使用我需要填充的項目數量，它非常慢（每次搜索30-45秒）或徹底崩潰瀏覽器。 – Alex

在這種情況下，請使用https://mbenford.github.io/ngTagsInput/。實際上它是標籤輸入，但可以讓您定義最小和最大標籤。支持autocomplite是相當不錯的。前段時間我將所有重量級輸入（大於1K的項目）都替換掉了。 – qwetty

感謝參考angular-chosen-localytics，但當前版本是[1.4.0]（https://github.com/leocaseiro/angular-chosen/releases/tag/1.4.0） –

角度版本的Select2可用。檢查這裏：https://www.npmjs.com/package/angular-select2

（代碼是在這裏：https://github.com/rubenv/angular-select2）

這個角圖書館使用選擇二的依賴，並有助於您的形式集成選擇二。

來源

2017-11-01 13:01:41

我已經嘗試了Angular-Select2，但它遭受與ui-select相同的性能問題，崩潰瀏覽器或花費1分鐘以上載入600-900個元素的列表。 – Alex

如何使用角度的jQuery Select2

回答

相關問題