Question

所以我创建了一个带有firebase的网上商店，我希望每个产品都有自己的评论部分，为了保持优化，我必须保持我的数据尽可能平坦。

考虑这个数据库结构

让我们说，重复我的7个产品后。我想在其中重复所有相应的评论，我是棱角分明的新人。真的想不出来。

查看这个jsfiddle，这是我的数据和示例的一个例子。奠定了我想要实现的目标。

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("showProducts", function($scope) {

  //Products
  $scope.products = [{
    "brand": "Apple",
    "id": 0,
    "img": "img/macbook.png",
    "model": 2015,
    "name": "Macbook 13'",
    "operatingSystem": "OS X",
    "price": "1900"
  }, {
    "brand": "Google",
    "id": 1,
    "img": "img/chromebook.png",
    "model": "Pixel 2",
    "name": "Chromebook",
    "operatingSystem": "Chrome OS",
    "price": "1700"
  }, {
    "brand": "Dell",
    "id": 2,
    "img": "img/dellxps13.png",
    "model": "XPS13",
    "name": "Dell XP13",
    "operatingSystem": "Win 10",
    "price": "1500"
  }, {
    "brand": "Lenovo",
    "id": 3,
    "img": "img/lenovo.png",
    "model": "A2",
    "name": "Lenovo A2",
    "operatingSystem": "Win 7",
    "price": "999"
  }, {
    "brand": "Sony",
    "id": 4,
    "img": "img/vaio.png",
    "model": "VAIO",
    "name": "Sony vaio",
    "operatingSystem": "Win 8.0",
    "price": "1200"
  }, {
    "brand": "Acer",
    "id": 5,
    "img": "img/acer.png",
    "model": "a7",
    "name": "Acer A7",
    "operatingSystem": "Win 8.1",
    "price": "1199"
  }, {
    "brand": "AW",
    "id": 6,
    "img": "http://gearnuke.com/wp-content/uploads/2015/07/alienware-1-1.jpg",
    "model": "5A",
    "name": "Alienware",
    "operatingSystem": "Windows 10",
    "price": "5000"
  }];


  //Reviews
  $scope.reviews = [{
    "-K1bfGsnWOclf1R85Uec": {
      "comment": "This laptop is great",
      "rating": "5",
      "user": "Maryam"
    }
  }, {
    "-K1bg0wHIUQ9qbxspLmg": {
      "comment": "This laptop is working good so far!",
      "rating": "4",
      "user": "spongbob"
    },
    "-K1bzqAQpr1br6h04bSH": {
      "comment": "some comment",
      "rating": "10",
      "user": "test"
    }
  }, {
    "-K1bfvS9MYGE82nTx67r": {
      "comment": "This laptop is meh",
      "rating": "3",
      "user": "superman"
    }
  }, {
    "-K1bgSTfbjQ-LRDScH-3": {
      "comment": "daym son",
      "rating": "10",
      "user": "Omar"
    }
  }, {
    "-K1bgljvaeY94E_aPQvY": {
      "comment": "commenthere",
      "rating": "10",
      "user": "pewdiepie"
    }
  }, {
    "-K1bgmXWai9PDake2Wh1": {
      "comment": "commenthere",
      "rating": "10",
      "user": "tiesto"
    }
  }, {
    "-K1bgnMlsp_Dl5ooBl2G": {
      "comment": "commenthere",
      "rating": "10",
      "user": "ex-gf"
    },
    "-K1gxHCtPdEniOGNFcWi": {
      "comment": "idk",
      "rating": 3,
      "user": "idk"
    }
  }];
});

.card {
  margin: 1% 1% 1% 1%;
  padding: 1% 1% 1% 1%;
  width: 250px;
  height: 150px;
  overflow-y: auto;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="showProducts">
  <div class="card" ng-repeat="product in products">
    <h5>{{ product.name }}</h5>

  </div>
  <div ng-repeat="review in reviews">
    <div ng-repeat="(key, data) in review">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
  </div>
</body>

在结果的底部，您会看到所有评论。我尝试了许多方法让他们在正确的地方取得了很大的成功。

Answer 1

您可以使用$index获取每个产品的正确评价列表。您只需要两个ng-repeat。

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("showProducts", function($scope) {

  //Products
  $scope.products = [{
    "brand": "Apple",
    "id": 0,
    "img": "img/macbook.png",
    "model": 2015,
    "name": "Macbook 13'",
    "operatingSystem": "OS X",
    "price": "1900"
  }, {
    "brand": "Google",
    "id": 1,
    "img": "img/chromebook.png",
    "model": "Pixel 2",
    "name": "Chromebook",
    "operatingSystem": "Chrome OS",
    "price": "1700"
  }, {
    "brand": "Dell",
    "id": 2,
    "img": "img/dellxps13.png",
    "model": "XPS13",
    "name": "Dell XP13",
    "operatingSystem": "Win 10",
    "price": "1500"
  }, {
    "brand": "Lenovo",
    "id": 3,
    "img": "img/lenovo.png",
    "model": "A2",
    "name": "Lenovo A2",
    "operatingSystem": "Win 7",
    "price": "999"
  }, {
    "brand": "Sony",
    "id": 4,
    "img": "img/vaio.png",
    "model": "VAIO",
    "name": "Sony vaio",
    "operatingSystem": "Win 8.0",
    "price": "1200"
  }, {
    "brand": "Acer",
    "id": 5,
    "img": "img/acer.png",
    "model": "a7",
    "name": "Acer A7",
    "operatingSystem": "Win 8.1",
    "price": "1199"
  }, {
    "brand": "AW",
    "id": 6,
    "img": "http://gearnuke.com/wp-content/uploads/2015/07/alienware-1-1.jpg",
    "model": "5A",
    "name": "Alienware",
    "operatingSystem": "Windows 10",
    "price": "5000"
  }];


  //Reviews
  $scope.reviews = [{
    "-K1bfGsnWOclf1R85Uec": {
      "comment": "This laptop is great",
      "rating": "5",
      "user": "Maryam"
    }
  }, {
    "-K1bg0wHIUQ9qbxspLmg": {
      "comment": "This laptop is working good so far!",
      "rating": "4",
      "user": "spongbob"
    },
    "-K1bzqAQpr1br6h04bSH": {
      "comment": "some comment",
      "rating": "10",
      "user": "test"
    }
  }, {
    "-K1bfvS9MYGE82nTx67r": {
      "comment": "This laptop is meh",
      "rating": "3",
      "user": "superman"
    }
  }, {
    "-K1bgSTfbjQ-LRDScH-3": {
      "comment": "daym son",
      "rating": "10",
      "user": "Omar"
    }
  }, {
    "-K1bgljvaeY94E_aPQvY": {
      "comment": "commenthere",
      "rating": "10",
      "user": "pewdiepie"
    }
  }, {
    "-K1bgmXWai9PDake2Wh1": {
      "comment": "commenthere",
      "rating": "10",
      "user": "tiesto"
    }
  }, {
    "-K1bgnMlsp_Dl5ooBl2G": {
      "comment": "commenthere",
      "rating": "10",
      "user": "ex-gf"
    },
    "-K1gxHCtPdEniOGNFcWi": {
      "comment": "idk",
      "rating": 3,
      "user": "idk"
    }
  }];
});

.card {
  margin: 1% 1% 1% 1%;
  padding: 1% 1% 1% 1%;
  width: 250px;
  height: 150px;
  overflow-y: auto;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="showProducts">
  <div class="card" ng-repeat="product in products">
    <h5>{{ product.name }}</h5>

    <div ng-repeat="(key, data) in reviews[$index]">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
  </div>
</body>

Answer 2

我想重复所有相应的评论

您的商品与评论之间必然存在关联。因此，请尝试将产品ID添加到评论以进行映射。

一旦您在产品及其各自的评论之间进行了映射，您就可以使用过滤器来实现您的功能。

<div ng-repeat="product in products">
  <div class="card"><h5>{{ product.name }}</h5></div>

  <div ng-repeat="review in reviews | filter:{productId: product.id}"">
    <div ng-repeat="(key, data) in review">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
  </div>
</div>

ng-repeat＆amp;对象关系

2 个答案: