web-dev-qa-db-ja.com

AngularJSでjQuerySelect2を使用する方法

JQuery（2.2.1）Select2（3.5.2）をAngularjs（1.5）で使用しようとしていますが、選択ボックスからデータを取得するのに苦労しています。 i-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'
    }];

}]);

これら2つをうまく機能させる方法はありますか？

jqueryangularjsjquery-select2angularjs-select2
5
Alex

JQueryから$ scope関数にアクセスする方法を検索した後、angular.element.scope（）。function（x）を使用すると、「change」イベントで各select2要素のキーを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>
0
Alex

Select2のAngularバージョンが利用可能です。ここをチェックしてください： https://www.npmjs.com/package/angular-select2

（コードはここにあります： https://github.com/rubenv/angular-select2 ）

このAngularライブラリはSelect2を依存関係として使用し、Select2をフォームに統合するのに役立ちます。

2
Ganesh Kumar Ponnuswamy

このプラグインを使用できます、
ngx-select2

JQueryとSelect2libを追加します

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Javascriptおよびcssライブラリを追加する場合は、angular.jsonの例から追加する必要があります。

 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "src/styles.css",
      "src/assets/css/select2.min.css"
    ],
    "scripts": [
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "node_modules/jquery/dist/jquery.js",
      "src/assets/js/select2.min.js"
    ]

インストールngx-select2

npm i ngx-select2

Select2コンポーネントを使用する

import { LSelect2Module } from 'ngx-select2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LSelect2Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

hTMLで

<l-select2 [(ngModel)]="selected" [data]="data" [options]="options" [disabled]="false" (valueChange)="valueChange($event)"></l-select2>

オプション

  • データ：select2選択用の初期化データ
  • オプション：select2オプション
  • 無効：select2コンポーネントを無効にします
  • valueChange：出力。 ngModelChangeと同じように、値の変更時に起動します
0
Abd Abughazaleh

Bower "angular-ui-select"を介してインストールします： "= 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モジュールをAngularと統合する方法をインターネットで検索します（少し複雑に見えるかもしれませんが、非常に簡単です。あなたがしたように呼び出すことは決して機能しません..。

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

Ui-selectの代替手段は次のとおりです。

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

:)

0
qwetty