如何根据AngularJs中下拉选择的值来控制视图?
How to control the view based on the value selected from drop down in AngularJs?
我的 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"
}]
}]
在我看来,我正在显示 table 中的数据以及计算最终分数的平均值。
我能够显示所有数据并取其平均值,现在我需要根据年份和季度过滤数据。
查看页面:
<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>
它应该显示不同的年份和不同的月份,并且在 selection 上它可以过滤 json 数据吗?是否可以根据这个整体数据更改视图的其余部分取决于下拉列表中的 selected 值?
比如把季度改成Q3或者年份改成2015年,table中的显示和平均值也随之变化,查看页面中有很多依赖于整体数据,这个过滤器只是引入,我不想改变如果可以根据下拉列表更改数据范围的各种功能 select,正在寻找实现此目的的方法?
您可以使用 Angular's filters 来过滤您的数据。您还可以将过滤后的结果存储在范围变量中,而您的原始数据保持不变。您需要将模型添加到用作过滤器的 select 元素,如下所示:
<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
范围变量,并且将仅包含过滤后的数据,而不会更改您的原始数据。查看一个基于您在 this jsFiddle 中的代码的简单示例实现。
我的 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"
}]
}]
在我看来,我正在显示 table 中的数据以及计算最终分数的平均值。
我能够显示所有数据并取其平均值,现在我需要根据年份和季度过滤数据。
查看页面:
<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>
它应该显示不同的年份和不同的月份,并且在 selection 上它可以过滤 json 数据吗?是否可以根据这个整体数据更改视图的其余部分取决于下拉列表中的 selected 值? 比如把季度改成Q3或者年份改成2015年,table中的显示和平均值也随之变化,查看页面中有很多依赖于整体数据,这个过滤器只是引入,我不想改变如果可以根据下拉列表更改数据范围的各种功能 select,正在寻找实现此目的的方法?
您可以使用 Angular's filters 来过滤您的数据。您还可以将过滤后的结果存储在范围变量中,而您的原始数据保持不变。您需要将模型添加到用作过滤器的 select 元素,如下所示:
<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
范围变量,并且将仅包含过滤后的数据,而不会更改您的原始数据。查看一个基于您在 this jsFiddle 中的代码的简单示例实现。