2
我的JSON數據是：如何根據從AngularJs中的下拉列表中選擇的值來控制視圖？
[{
"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數據，並且可以在視圖的其餘部分是基於被改變在這個總體數據取決於從下拉選擇的價值？ 就像到季度到季度到2015年一樣，表格中的顯示和平均值也會相應地變化，整個數據中有很多依賴於查看頁面，這個過濾器剛剛介紹，我不想改變各種功能如果數據範圍可以根據下拉選擇進行更改，尋找方法來實現這一點？