如何使用 jQuery Select2 和 AngularJS

Question

我正在尝试将 jQuery (2.2.1) Select2 (3.5.2) 与 Angularjs (1.5) 一起使用，但我很难从 select 盒子。我已经尝试 ui-select 并且我可以检索数据...但是在搜索时经常会导致浏览器崩溃，速度非常慢并且整体不稳定（5000-10000 项）。 jQuery Select2 快速且响应迅速，即使有大量条目，但当我 select 一个选项时我似乎无法获得对象。

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

}]);

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

Answer 1

通过凉亭安装"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 插件。在 Internet 上搜索如何将 jQuery 模块与 Angular 集成（它可能看起来有点复杂，但它很容易 uite。以你所做的方式调用它永远行不通....

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

ui-select 的替代方法是：

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

:)

Answer 2

在搜索如何从 jQuery 访问 $scope 函数后，我发现使用 angular.element.scope().function(x) 将允许我为每个 select2 元素传递密钥，在"change" 事件，进入 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>

Answer 3

Angular Select2 版本可用。在这里检查：https://www.npmjs.com/package/angular-select2

（代码在这里：https://github.com/rubenv/angular-select2）

这个 Angular 库使用 Select2 作为依赖项并帮助将 Select2 集成到您的表单中。

Answer 4

你可以使用这个插件，
ngx-select2

添加 jQuery 和选择 2 库

<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 select
选项：select2 个选项
禁用：禁用select2组件
valueChange：输出。在值变化时触发，与 ngModelChange

如何使用 jQuery Select2 和 AngularJS

How to use jQuery Select2 with AngularJS

jquery

angularjs

jquery-select2

angularjs-select2