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つをうまく機能させる方法はありますか?
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>
Select2のAngularバージョンが利用可能です。ここをチェックしてください: https://www.npmjs.com/package/angular-select2
(コードはここにあります: https://github.com/rubenv/angular-select2 )
このAngularライブラリはSelect2を依存関係として使用し、Select2をフォームに統合するのに役立ちます。
このプラグインを使用できます、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
コンポーネントを無効にしますngModelChange
と同じように、値の変更時に起動します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",)
:)