Question

刚刚开始学习AngularJS，并决定使用我迄今学到的知识来模拟一个基本的产品库，并且我遇到了障碍。目前，我有一个简单的产品库，包含3个模板（类别列表，产品类别列表和产品概述）。我想要做的是设置某种条件，如果所选类别中的产品具有子类别，则使用defaultConfig模板显示子类别列表。如果他们没有子类别，则只需直接转到multiDexEnabled true模板。

我created this Plunker显示了我到目前为止所处的位置。

在上面的示例中，如果有人点击＆＃34;汽车＆＃34;我希望它随后使用category-list模板显示子类别列表。所以，当你点击＆＃34;汽车＆＃34;它会带您进入一个带有2个按钮的屏幕：product-list和category-list。点击其中一个按钮，然后会使用4-door模板显示这些子类别中的产品。但是，如果你点击＆＃34; Trucks＆＃34;从初始屏幕开始，它会直接转到2-door模板，因为卡车没有子类别。

这是我的类别列表模板：

product-list

这是我的产品清单模板：

product-list

Answer 1

我建议您的数据模型可以使用一些工作，并将所有产品放在一个包含类别和子类别作为属性的数组中。但是，您可以通过对products-list.html的此更改获得所需的内容。

＆＃13;

            $result = mysqli_query($connection, $query);


            $data = mysqli_fetch_assoc($result);


            while($row = $data) {
                echo $row['uuid'];
            }

＆＃13;

Answer 2

查看我更新的plunker

基本上，您需要通过对子类别进行分组并检查我们是否即将在后续点击中输入此子类别来扩展selectCategory方法。像这样：

vm.selectCategory = function(category) {
  var subCats = [],
      map = {};

  if (category.items && !category.items[0].subCategory){
    vm.selectedCategory = category;
    vm.inSubCat = true;
    return;
  }

  vm.inSubCat = !category.items;
  if (category.items) category.items.forEach(function(e){
    if (!map[e.subCategory]) subCats.push({category: e.subCategory, name: category.category});
    map[e.subCategory] = true;
  });
  vm.products = subCats;

  if (vm.inSubCat) vm.selectedCategory = {items: vm.data.filter(function(c){
    return c.category == category.name;
  })[0].items.filter(function(p){
    return p.subCategory == category.category;
  }) };
}

Answer 3

我建议您以两种可能的方式重构代码：

a）尝试从控制视图的控制器中删除行（显示不同指令的过程）并在指令中使用事件

b）使用ng-show和ng-hide指令控制您的视图，这些指令将显示或隐藏代码的某些部分。

如何在AngularJS产品库中处理条件子类别

3 个答案: