Question

我正在尝试使用带有Angularjs（1.5）的jQuery（2.2.1）Select2（3.5.2），但是很难从选择框中获取数据。我已经尝试了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>

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

Select2的Angular版本可用。点击此处：https://www.npmjs.com/package/angular-select2

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

此Angular Library使用Select2作为依赖项，并帮助在表单中集成Select2。

Answer 2

通过凉亭安装＆＃34; angular-ui-select＆＃34;：＆＃34; = 0.12.1＆＃34; 然后在你的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",)

：）

Answer 3

在搜索了如何从jQuery访问$ scope函数之后，我发现使用angular.element.scope（）。function（x）将允许我在“change”事件中传递每个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>

Answer 4

您可以使用此插件，
ngx-select2

添加jQuery和Select2库

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

如何使用带角度的jQuery Select2

4 个答案: