AngularJS - 在NG重复订购和解析数据的基础上，家长NG重复 [英] AngularJS - Ordering and Parsing data in a ng-repeat, based on a parent ng-repeat
问题描述
我试着写一个相当复杂的 NG-重复潜在地使用过滤和parseing。
什么，我首先做的是 NG-重复从目前的月份ING 12个月的表格标题。
我则显示两行 - 和搜索与搜索撞击在不影响
我所要做的就是通过我的JSON文件循环，包含我的搜索数据，以及数众多的与冲击和搜索如何在不影响搜索，已基于在 SearchedOn 字段特定月份进行。
背后的了解与影响搜索的逻辑和在不影响搜索是根据 IsIncludedInSearchImpactCalculation 字段是真的还是假的。
还有一个需要发生的情况是，如果我的JSON文件中包含的数据元素大于12个月旧（基于 SearchedOn 字段），那么这应该是不包括在计算中。
HTML
＆LT; DIV NG-应用=测试＆GT;
＆LT; DIV NG控制器=CTRL＆GT;
＆LT;表＆gt;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
百分位＆GT;＆LT; /第i
百分位NG重复=currMonth几个月＆GT; {{currMonth}}＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
百分位＆gt;在冲击＆LT搜索; /第i个
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD＆→3所述; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD→1＆下; / TD＆GT;
＆所述; TD→1＆下; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD＆→3所述; / TD＆GT;
＆所述; TD→1＆下; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD→1＆下; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT;第i搜索在不影响＆LT; /第i
＆所述; TD→2＆下; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD→1＆下; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; BR＆GT;
＆LT; P＆gt;在影响搜索：LT; / P＆GT;
＆LT;李NG重复=searchedOn在搜索|过滤器：{IsIncludedInSearchImpactCalculation：真正}＆GT; {{searchedOn.SearchedOn}}＆LT; /李＆GT;
＆LT; BR＆GT;
＆LT; P＆gt;在没有影响搜索：＆LT; / P＆GT;
＆LT;李NG重复=searchedOn在搜索|过滤器：{IsIncludedInSearchImpactCalculation：假}＆GT; {{searchedOn.SearchedOn}}＆LT; /李＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
JS：
angular.module（测试，[]）。控制器（Ctrl键，功能（$范围）{
VAR日期=新的日期（）;
VAR个月= []，
即monthNames =一月，二月，月，2007-4-1，五一，君，
七月，八月，SEP，十月，十一月，DEC];
对于（VAR I = 0; I＆LT; 12;我++）{
months.push（即monthNames [date.getMonth（）] +''+ date.getFullYear（））; //每次减去一个月
date.setMonth（date.getMonth（） - 1）;
}
$ scope.months =月; $ scope.Searches = [{
SearchedOn：19/04/2014，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：18/04/2014，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：2014年1月5日，
IsIncludedInSearchImpactCalculation：假的
}，{
SearchedOn：21/05/2014，
IsIncludedInSearchImpactCalculation：假的
}，{
SearchedOn：20/07/2013，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：07/01/2014，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：2013年8月12日，
IsIncludedInSearchImpactCalculation：假的
}，{
SearchedOn：24/02/2014，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：30/06/2013，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：28/06/2014，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：14/08/2013，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：2014年11月4日，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：13/08/2013，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：2013年3月8日，
IsIncludedInSearchImpactCalculation：真
}，{
SearchedOn：20/01/2011，
IsIncludedInSearchImpactCalculation：真
}];
}）;
下面是我的小提琴： http://jsfiddle.net/oampz/j9LBe/
在我的小提琴，我有手动硬codeD表应该是什么样的基础上名单。
更新：
添加
＆LT; TD NG重复=项过滤=（搜索|过滤器：{IsIncludedInSearchImpactCalculation：真}）＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;过滤列表中有{{filtered.length}}项目＆lt; / TD＆GT;
获取我的项目总数在一排的搜索带影响或与搜索没有任何影响查看小提琴：的 http://jsfiddle.net/oampz/j9LBe/1/
现在所需要的一切都是为了集团按月基础上，previous NG重复：
百分位NG重复=currMonth几个月＆GT; {{currMonth}}＆LT; /第i
这可以简单地归结到这个过滤器：
$ scope.searchFilter =功能（包括，日期）{
复位功能（搜索）{
如果（search.IsIncludedInSearchImpactCalculation包括==！）返回false; //需要解析和你的JSON的日期使用日期构造
变种日期部分= search.SearchedOn.split（/）;
VAR searchedOn =新的日期（日期部分[2]，日期部分[1] -1，日期部分[0]）; //月份是0-11 如果（date.month === searchedOn.getMonth（）及和放大器; date.year === searchedOn.getFullYear（））返回true;
否则返回false;
};
}
和使用它像这样：
＆LT;第i具有冲击＆LT搜索; /第i个
＆LT; TD NG重复=currMonth几个月＆GT; {{（搜索|过滤器：searchFilter（真，currMonth））。长度}}＆LT; / TD＆GT;
或本
＆LT;第i在不影响＆LT搜索; /第i个
＆LT; TD NG重复=currMonth几个月＆GT; {{（搜索|过滤器：searchFilter（假，currMonth））。长度}}＆LT; / TD＆GT;
的这基本上做你问的称号是什么，基于父环路（ NG-重复个月）解析和内环路滤波器的数据（这是怎么引起的 |。过滤器传递阵列功能中的每个元素）的
基本上，我们需要再次NG-重复个月，但这段时间打印和未列入搜索次数为每月。因此，我们的过滤器需要3个参数，先不管它包含与否，第二个有问题的一个月，最后的搜索查询匹配的几个月。
角器期望一个数组来过滤和将每个项目的过滤功能。因此，我们返回，获取单一的搜索作为一个参数的函数，做我们的事，如果它符合我们的标准，或不返回true或false取决于。
结果 |过滤返回充满从过滤函数返回真正的人一个新的数组（这样我们就可以 NG-重复带过滤器等）。因为我们现在有我们的匹配阵列，我们可以简单地把它的长度为计数。
我知道听起来有点混乱，但检查它并不像我解释混乱的小提琴。
随意问什么说不清楚。
Im trying to write a fairly complex ng-repeat that potentially uses filtering and parseing.
What i am first doing is ng-repeating a table heading of 12 months from the current month.
I am then displaying two rows - Searches with impact and Searches with NO impact
What i am trying to do is loop through my JSON file that contains my search data, and counts how many Searches with Impact and Search with No Impact, have been carried out for that particular month based on the SearchedOn field.
The logic behind understanding Searches with Impact and Search with No Impact is based on the IsIncludedInSearchImpactCalculation field being true or false.
What also needs to happen is that if my JSON file contains element of data that is greater than 12months old (based on the SearchedOn field), then this should be not included in the calculation.
HTML:
<div ng-app="test">
<div ng-controller="Ctrl">
<table>
<thead>
<tr>
<th></th>
<th ng-repeat="currMonth in months">{{currMonth}}</th>
</tr>
</thead>
<tbody>
<tr>
<th>Searches with impact</th>
<td></td>
<td>3</td>
<td></td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
<td>1</td>
<td></td>
<td>1</td>
</tr>
<tr>
<th>Searches with NO impact</th>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br>
<p>Searches with impact:</p>
<li ng-repeat="searchedOn in Searches | filter:{IsIncludedInSearchImpactCalculation:true}">{{searchedOn.SearchedOn}}</li>
<br>
<p>Searches with NO impact:</p>
<li ng-repeat="searchedOn in Searches | filter:{IsIncludedInSearchImpactCalculation:false}">{{searchedOn.SearchedOn}}</li>
</div>
</div>
JS:
angular.module('test', []).controller('Ctrl', function ($scope) {
var date = new Date();
var months = [],
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (var i = 0; i < 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
// Subtract a month each time
date.setMonth(date.getMonth() - 1);
}
$scope.months = months;
$scope.Searches = [{
"SearchedOn": "19/04/2014",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "18/04/2014",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "01/05/2014",
"IsIncludedInSearchImpactCalculation": false
}, {
"SearchedOn": "21/05/2014",
"IsIncludedInSearchImpactCalculation": false
}, {
"SearchedOn": "20/07/2013",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "07/01/2014",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "08/12/2013",
"IsIncludedInSearchImpactCalculation": false
}, {
"SearchedOn": "24/02/2014",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "30/06/2013",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "28/06/2014",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "14/08/2013",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "11/04/2014",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "13/08/2013",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "03/08/2013",
"IsIncludedInSearchImpactCalculation": true
}, {
"SearchedOn": "20/01/2011",
"IsIncludedInSearchImpactCalculation": true
}];
});
Here's my fiddle: http://jsfiddle.net/oampz/j9LBe/
In my fiddle, i have manually hard coded what the table should look like based on the lists.
UPDATE:
Adding:
<td ng-repeat="item in filtered = (Searches | filter:{IsIncludedInSearchImpactCalculation:true})"></td>
<td>Filtered list has {{filtered.length}} items</td>
Gets me the total number of items in a row for Searches with impact or Searches with NO impact see fiddle: http://jsfiddle.net/oampz/j9LBe/1/
Now all that is needed is to group by month based on the previous ng-repeat:
<th ng-repeat="currMonth in months">{{currMonth}}</th>
It simply boils down to this filter:
$scope.searchFilter = function(included,date){
return function(search){
if(search.IsIncludedInSearchImpactCalculation!==included) return false;
//needed to parse and use date constructor on your json's dates
var dateParts = search.SearchedOn.split("/");
var searchedOn = new Date(dateParts[2],dateParts[1]-1,dateParts[0]);//months are 0-11
if(date.month === searchedOn.getMonth() && date.year===searchedOn.getFullYear()) return true;
else return false;
};
}
and used it like this:
<th>Searches with impact</th>
<td ng-repeat="currMonth in months">{{(Searches|filter:searchFilter(true,currMonth)).length}}</td>
or this:
<th>Searches with NO impact</th>
<td ng-repeat="currMonth in months">{{(Searches|filter:searchFilter(false,currMonth)).length}}</td>
This basically does what you are asking in the title, based on the parent loop (ng-repeat of months) parses and filters data in inner loop(which is caused by | filter passing every element of array to a function.)
Basically we need to ng-repeat months again but this time for printing count of included and not included searches for each month. So our filter needs 3 parameters, first whether it's included or not, second the month in question and lastly the searches to check for matching months.
angular filters expect an array to filter and passes each item to the filter function. So we return a function that gets single search as a parameter, do our thing and return true or false depending on if it's matched our criteria or not.
As a result | filter returns a new array filled with ones returned true from the filter function(this way we can ng-repeat with filters etc). Since we have our matched array now, we can simply get it's length as count.
I know sounds kind of confusing but check the fiddle it's not as confusing as i explained.
Feel free to ask anything that is not clear.
这篇关于AngularJS - 在NG重复订购和解析数据的基础上，家长NG重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
