目前,我有一个ng-repeat
嵌套在另一个ng-repeat
内。第一个按section
对项目进行分组,而第二个对其组中的各个项目进行分组。如果我只想要章节标题,那么使用Famous Angular fa-scroll-view
似乎适用于第一个ng-repeat
。当我包含第二个ng-repeat
时,所有项目都重叠
angular.module('main', ['famous.angular', 'angular.filter'])
.controller('search', ['$scope', '$famous',
function($scope, $famous) {
var EventHandler = $famous['famous/core/EventHandler'];
$scope.myEventHandler = new EventHandler();
$scope.Products = [{
"Product": "Red Maraschino Cherries",
"Section": "Baking Ingredients",
"Categories": "Cherries ñ tinned / jars",
"Brand": "Masterfood (USA)",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Pitted Bing Cherries",
"Section": "Baking Ingredients",
"Categories": "Cherries ñ tinned / jars",
"Brand": "Oregon(USA)",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Assorted Wheat-Free CrackersñHuckleberry",
"Section": "Biscuits, Crackers & Crispbreads",
"Categories": "Biscuits",
"Brand": "Maryís Gone Crackers",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Mini Bite Chocolate Grahams",
"Section": "Biscuits, Crackers & Crispbreads",
"Categories": "Biscuits",
"Brand": "New Morning",
"Kosher Categories": "D",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Fruit Bowls (4 pack)",
"Section": "Fish ",
"Categories": "†Fruit† -†† Plastic Cups & Tubs",
"Brand": "Dole (Philippines)",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Tropical Fruit",
"Section": "Fruit ",
"Categories": "†Fruit† -†† Plastic Cups & Tubs",
"Brand": "Dole (Philippines)",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Pineapple",
"Section": "Fruit ",
"Categories": "†Fruit† -†† Plastic Cups & Tubs",
"Brand": "Dole (Philippines)",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Mandarin Segments",
"Section": "Fruit ",
"Categories": "†Fruit† -†† Plastic Cups & Tubs",
"Brand": "Dole (Philippines)",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}, {
"Product": "Red Maraschino Cherries",
"Section": "Fruit ",
"Categories": "Fruit† -† Tinned / Plastic Jars",
"Brand": "Masterfoods (USA)",
"Kosher Categories": "P",
"Kosher Certification": "AA",
"Date Checked": null,
"Notes": ""
}]
}
]);
<html>
<head>
<link href="http://code.famo.us/famous-angular/latest/famous-angular.min.css" rel="stylesheet" />
<link href="http://code.famo.us/famous/latest/famous.css" rel="stylesheet"/>
</head>
<body ng-app="main">
<fa-app class="full-screen" ng-controller="search">
<fa-scroll-view fa-pipe-from="myEventHandler">
<fa-view ng-show="value.filtered.length !== 0" ng-repeat="(key, value) in Products | groupBy:'Section'">
<fa-surface fa-background-color="'red'" fa-size="[undefined, 100]">
{{key}}
</fa-surface>
<fa-view ng-repeat="product in value.filtered = (value | filter: find)" fa-background-color="'green'" fa-pipe-to="myEventHandler">
<fa-surface>
{{product.Product}}
</fa-surface>
</fa-view>
</fa-view>
</fa-scroll-view>
</fa-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>
<script src="http://code.famo.us/famous/latest/famous-global.js"></script>
<script src="http://code.famo.us/famous/latest/famous.js"></script>
<script src="http://code.famo.us/famous-angular/latest/famous-angular.min.js"></script>
</body>
</html>