如何将 jQuery Select2 与 AngularJS 一起使用

我正在尝试将jQuery（2.2.1）

Select2（3.5.2）与Angularjs（1.5）一起使用，但是很难从选择框中获取数据。我已经尝试了 ui-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>

应用.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'
    }];
}]);

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

在搜索如何从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>

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

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

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

通过 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",)

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

添加 jQuery 和 Select2 lib

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

在网页中

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

选项

数据：选择 2 个初始化数据进行选择
：选择2个选项
：禁用select2组件
值更改：输出。值更改时触发，与ngModelChange相同

相关内容

最新更新

热门标签：