如何在 AngularJS 中使用 jQuery Select2
Posted
技术标签:
【中文标题】如何在 AngularJS 中使用 jQuery Select2【英文标题】：How to use jQuery Select2 with AngularJS 【发布时间】：2016-07-08 03:32:42 【问题描述】：我正在尝试将 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>
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'
];
]);
有没有办法让这两者正常工作？
【问题讨论】：
github.com/angular-ui/ui-select 我已经实现了这个，但是在大型列表中，它变得很慢，并且经常会导致浏览器崩溃。 多大？我认为长列表和角度组合不是最佳的。这意味着任何类似这样的角度插件都会被粉碎。尝试将搜索移至服务器。 对于大型列表，您可以从服务器 async 获取结果 - 我一直在使用此模式，它运行平稳，从未烧焦或类似的东西 有 3 个选择框，每个框的大小在 5-10k 之间 【参考方案1】：Select2 的 Angular 版本可用。在这里查看：https://www.npmjs.com/package/angular-select2
（代码在这里：https://github.com/rubenv/angular-select2）
这个 Angular 库使用 Select2 作为依赖项，并有助于将 Select2 集成到您的表单中。
【讨论】：
我尝试过 Angular-Select2，但它遇到了与 ui-select 相同的性能问题、浏览器崩溃或需要 1 分钟以上才能加载 600-900 个元素的列表。【参考方案2】：在搜索了如何从 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>
【讨论】：
【参考方案3】：通过凉亭“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",)
:)
【讨论】：
ui-select 无法用于我需要填充的项目数量，它要么非常慢（每次搜索 30-45 秒），要么彻底崩溃浏览器。 在这种情况下使用mbenford.github.io/ngTagsInput。事实上，它是标签输入，但让您能够定义最小和最大标签。对自动编译的支持非常好。前段时间我替换了所有繁重的输入（超过 1k 个项目）。 感谢参考 angular-chosen-localytics，但当前版本是1.4.0【参考方案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 用于选择的初始化数据 选项：选择 2 个选项 禁用：禁用select2组件
valueChange：输出。值更改时触发，与ngModelChange 相同
【讨论】：
这是一个 Angular 2+ 回答作为 AngularJS 问题发布的问题。以上是关于如何在 AngularJS 中使用 jQuery Select2的主要内容，如果未能解决你的问题，请参考以下文章
如何在 AngularJS 中使用 jQuery Select2
如何将一些 jQuery 函数转换为 angularjs 指令？