1

目前我有一个ng-repeat嵌套在另一个ng-repeat. 第一个按 对项目进行分组section，而第二个则按其组中的各个项目进行布局。如果我只想要部分标题，则使用 Famous Angularfa-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>

4

0 回答 0