2

私のJsonデータは次のとおりです。

[{
    "objective": "My obj",
    "score": 9,
    "status": "active",
    "quarter": "Q1",
    "year": "2015",
    "team": "A",
    "owner_ids": [
        "175323"
    ],
    "key_results": [{
        "result": "resut11",
        "status": "Pending"
    }, {
        "result": "result12",
        "status": "On time"
    }]
}, {
    "objective": "My second obj",
    "score": 5,
    "status": "active",
    "quarter": "Q2",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "175223"
    ],
    "key_results": [{
        "result": "resut21",
        "status": "Pending"
    }, {
        "result": "result22",
        "status": "On time"
    }]
}, {
    "objective": "My third objective",
    "score": 3,
    "status": "active",
    "quarter": "Q3",
    "year": "2015",
    "team": "C",
    "owner_ids": [
        "15323"
    ],
    "key_results": [{
        "result": "resut31",
        "status": "Pending"
    }, {
        "result": "result12",
        "status": "Pending"
    }]
}, {
    "objective": "My fourth objective",
    "score": 3,
    "status": "active",
    "quarter": "Q2",
    "year": "2015",
    "team": "A",
    "owner_ids": [
        "17598"
    ],
    "key_results": [{
        "result": "resut41",
        "status": "Pending"
    }, {
        "result": "result42",
        "status": "On time"
    }]
}, {
    "objective": "My fifth objective",
    "score": 5,
    "status": "active",
    "quarter": "Q3",
    "year": "2016",
    "team": "B",
    "owner_ids": [
        "13298"
    ],
    "key_results": [{
        "result": "resut51",
        "status": "Pending"
    }, {
        "result": "result52",
        "status": "On time"
    }]
}, {
    "objective": "My sixth objective",
    "score": 7,
    "status": "active",
    "quarter": "Q4",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "1328"
    ],
    "key_results": [{
        "result": "resut61",
        "status": "Pending"
    }, {
        "result": "result62",
        "status": "On time"
    }]
}, {
    "objective": "My seventh objective",
    "score": 7,
    "status": "active",
    "quarter": "Q3",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "1328"
    ],
    "key_results": [{
        "result": "resut71",
        "status": "Pending"
    }, {
        "result": "result72",
        "status": "On time"
    }]
}]

私の見解では、データを表に表示し、最終スコアの平均を計算しています。

すべてのデータを表示して平均化することができました。次に、年と四半期に基づいてデータをフィルタリングする必要があります。

ページを表示:

<h3>Overall Score: {{calculateAverage(xyz)}}</h3>

<tbody>
    <tr ng-repeat="entries in xyz">
        <td>{{$index + 1}} </td>
        <td>{{entries.objective}}</td>
        <td>{{entries.key_results[0].result}}</td>
        <td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On time' }">
            {{entries.key_results[0].status}}
        </td>
        <td>{{entries.final_score}}</td>
        <td>{{entries.owner_ids[0]}}</td>
        <td>
            <a class="btn btn-sm btn-success" ng-click="/#/mypage/{{entries.owner_ids[0]}}"> View It </a>
        </td>
    </tr>
</tbody>

コントローラ：

$scope.xyz = myservice.query();

$scope.calculateAverage = function (MyData) {
    //console.log(MyData);
    var sum = 0;
    for (var i = 0; i < MyData.length; i++) {
        var sum = sum + MyData[i].final_score;
    }
    var avg = sum / (MyData.length);
    //console.log(avg);

    return avg.toFixed(2);
};

これに基づいて、すべてのデータを表示する他の表示があります。

ドロップダウンボックスを実装しました

<div class="col-lg-3">
    <h4>Year:</h4>
    <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
        <option>2015</option>
    </select>
</div>
<div class="col-lg-3">
    <h4>Quarter:</h4>
    <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
        <option>Q3</option>
        <options>Q4</options>
    </select>
</div>

個別の年と個別の月を表示する必要があり、選択するとjsonデータをフィルタリングでき、ドロップダウンから選択した値に応じて、この全体的なデータに基づいてビューの残りを変更できますか? 四半期を Q3 に変更したり、年を 2015 に変更したりするように、テーブルの表示と平均もそれに応じて変更されます。全体のデータの表示ページには多くの依存関係があります。このフィルターは導入されたばかりです。さまざまな機能を変更したくない場合ドロップダウン選択に基づいてデータ範囲を変更できますが、これを達成するためのアプローチを探していますか?

4

1 に答える 1

1

Angular のフィルターを使用してデータをフィルター処理できます。フィルタリングされた結果をスコープ変数に保存することもでき、元のデータはそのまま残ります。次のように、フィルターとして使用している選択要素にモデルを追加する必要があります。 

        <div class="col-lg-3">
             <h4>Year:</h4>

            <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px" ng-model="yearFilter">
                <option value="2015">2015</option>
                <option value="2016">2016</option>
            </select>
        </div>
        <div class="col-lg-3">
             <h4>Quarter:</h4>

            <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px" ng-model="quarterFilter">
                <option value="Q3">Q3</option>
                <option value="Q4">Q4</option>
            </select>
        </div>

フィルタは次のように適用する必要があります。

<tr ng-repeat="entries in filteredObjects=(xyz|filter:{'year':yearFilter,'quarter':quarterFilter})">

これで、スコープ変数をそのコントローラーのどこでも使用できるようになりfilteredObjects、元のデータを変更することなく、フィルター処理されたデータのみが含まれるようになります。この jsFiddleのコードに基づいた簡単な実装例を確認してください。

于 2015-10-06T04:26:09.570 に答える