0

プロジェクトの 1 つに angularjs を使用しています。フィルタリング機能を実装しようとしています。

以下のコードを使用してフィルターチェックボックスを作成しています

<div class="checkbox" ng-repeat="incidentType in keywords.incidentType">
<label><input type="checkbox" value={{incidentType}}>{{incidentType}}</label>
</div>

結果は下の画像に示されています

ここに画像の説明を入力

チェックボックスをオンまたはオフにすると、以下のようなオブジェクトを作成する必要があります。この json オブジェクトに基づいて、サーバーにリクエストを送信し、一致するデータをフェッチします。

{
    "application": [
        "Athena",
        "EWS"
    ],
    "incidentType": [
        "Publishing Failure",
        "Security Failure"
    ]
}

angularjsでこれをどのように達成できるかについてのアイデア。どんな助けでも大歓迎です。

4

1 に答える 1

3

このような場合、送信したいオブジェクトのようなオブジェクトをモデルとして使用し、それを ng-repeat のデータにバインドできます。最初にここで確認させてください: http://jsfiddle.net/DotDotDot/gcEJH/サンプルコードを取得し、各チェックボックスで ng-model に使用
するオブジェクト () を持つコントローラーを追加しました。$scope.checked

$scope.checked={application:{}, incidentType:{}};

次に、HTMLで

<div class="checkbox" ng-repeat="incidentType in keywords.incidentType">
<label><input type="checkbox" ng-model='checked.incidentType[incidentType]' ng-true-    value='{{incidentType}}'>{{incidentType}}</label>
</div>

ng-model 部分は、値に対応する kay の下の、オブジェクトのincidentType 部分に値を入れるように angular に指示します。これはまったく同じオブジェクトを提供しませんが、次のようなものになります:

{
"application": {
    "Athena": false,
    "EWS": true,
    "EWindows": true
},
"incidentType": {
    "Publishing Failure": true,
    "Security Failure": true
}
}

これは実際にはかなり近く、そこからリクエストを作成できます（または、必要な同じオブジェクトを簡単に再作成できます）

これが役に立てば幸いです、楽しんでください

=)

于 2013-08-22T18:42:32.483 に答える