角度付きのjQuery Select2の使い方

Angularjs（1.5）でjQuery（2.2.1）Select2（3.5.2）を使用しようとしていますが、選択ボックスからデータを取得するのが困難です。私は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）は、私は、各SELECT2のためのキーを渡すことができるようになることがわかりました要素を「変更」イベントで角度に変換し、操作することができます。

<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のモジュールを統合するためのインターネット上の検索あなたがやった方法でそれを呼び出すには、働くことは決してありません.... UI選択のための

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

代替は次のとおりです。

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/を使用してください。実際にはタグ入力ですが、あなたには最小タグと最大タグを定義することができます。オートコンプリートのサポートはかなり良いです。いくつかの時間前に、私はすべての重い入力を1K以上のアイテムに置き換えました。 – qwetty

角度選択済みの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）

をこの角度ライブラリは、依存関係としてSelectセレクトを使用して、フォームでSelectセレクトを統合するのに役立ちます。

出典

2017-11-01 13:01:41

私はAngular-Select2を試しましたが、ui-selectと同じパフォーマンス上の問題を抱えていました。ブラウザがクラッシュしたり、600-900要素のリストをロードするために1分以上かかりました。 – Alex

角度付きのjQuery Select2の使い方

答えて

関連する問題