如何根据从 AngularJs 中的下拉列表中选择的值来控制视图？

Question

我的 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年，表中的显示和平均值也随之变化，查看页面有很多对整体数据的依赖，这个过滤器只是引入，我不想改变各种功能，如果可以根据下拉选择更改数据范围，寻找实现此目的的方法？

Answer 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中的代码查看一个简单的示例实现。