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 回答