Javascript 角度-我可以在嵌套ng repeat中的多个对象上使用单个函数来触发该对象的ng显示吗？_Javascript_Angularjs_Angularjs Ng Repeat_Angularjs Ng Show

Javascript 角度-我可以在嵌套ng repeat中的多个对象上使用单个函数来触发该对象的ng显示吗？

javascript angularjs

Javascript 角度-我可以在嵌套ng repeat中的多个对象上使用单个函数来触发该对象的ng显示吗？,javascript,angularjs,angularjs-ng-repeat,angularjs-ng-show,Javascript,Angularjs,Angularjs Ng Repeat,Angularjs Ng Show,总结我有一份品牌清单和一份产品清单。我使用ng repeat显示品牌列表，使用带有过滤器的ng repeat显示各自品牌内的产品列表。我希望每个品牌和每个产品都有一个按钮，显示该品牌/产品的更多信息所有这些按钮应在控制器上使用相同的功能。问题显示该品牌更多信息的按钮也会显示该品牌的每个产品的更多信息，除非（这对我来说是奇怪的部分）我先单击该品牌内某个产品的按钮，在这种情况下，该按钮将正常工作编码请查看此处的Plunker，并注意，当您单击某个品牌上的“显示类型”时，它还会显示该品牌内的所有产

总结
我有一份品牌清单和一份产品清单。我使用ng repeat显示品牌列表，使用带有过滤器的ng repeat显示各自品牌内的产品列表。我希望每个品牌和每个产品都有一个按钮，显示该品牌/产品的更多信息所有这些按钮应在控制器上使用相同的功能。

问题
显示该品牌更多信息的按钮也会显示该品牌的每个产品的更多信息，除非（这对我来说是奇怪的部分）我先单击该品牌内某个产品的按钮，在这种情况下，该按钮将正常工作

编码
请查看此处的Plunker，并注意，当您单击某个品牌上的“显示类型”时，它还会显示该品牌内的所有产品类型：

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp">
      <div ng-controller="MyController as vm">
        <div ng-repeat="brand in brands">
          <h1>
              {{brand.name}}
            </h1>
          <button ng-click="showType(brand)">
            Show Brand Type
          </button>
          <div ng-show="show">
            {{brand.type}}
          </div>
          <div ng-repeat="product in products
          | filter:filterProducts(brand.name)">
            <h2>
                  {{product.name}}
                </h2>
            <button ng-click="showType(product)">
              Show Product Type
            </button>
            <div ng-show="show">
              {{product.type}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

重要提示：我意识到我可以向对象（brand.show）添加一个属性，并将该对象传递到函数中，然后将该属性更改为true/false，但我不想这样做，因为在我的实际应用程序中，该按钮将显示一个编辑品牌/产品并将信息提交给Firebase的表单，我不希望对象上有“show”属性。我不希望每次在Firebase中编辑信息时都必须删除“show”属性。

您的

show

布尔属性与整个树相同（在相同范围内）。在

ng repeat

中对子作用域

scope:true

使用角度指令有助于隔离每个

show

属性。我已经找到了你的密码：

如果您不介意在数据中添加临时属性，最简单的修复方法是以下更改：

<div ng-show="product.show">
   {{product.type}}
</div>

或者，如果不想触摸对象属性，可以创建$scope.shownTypes数组，然后单击将对象推入显示的数组或从中移除对象。然后可以检查数组中是否存在该对象，并适当地显示或不显示该类型。如果您需要一个示例，请告诉我。

ng repeat

指令创建自己的范围，如果您需要的话

this.show = !this.show

如果单击品牌按钮-用于品牌范围，则创建/更改<代码>在当前范围中显示属性，然后单击产品按钮-用于范围具体产品

为了避免这种情况，您应该在单击按钮之前创建此属性，例如使用

ng init

，如

ng-init="show=false;"

在带有'ng repeat'指令的元素上

样品

var-app=angular.module（'myApp'，[]）；
app.controller（'MyController'，函数（$scope）{
$scope.brands=[{
名称：“Kewl”，
类型：“谷物”
}, {
姓名：“佐库”，
类型：“玩具”
}, {
姓名：“Loko”，
类型：“沙发”
}]
$scope.products=[{
姓名：'Kewlio'，
类型：'糖谷类'，
品牌：“Kewl”
}, {
姓名：'Kewliano'，
类型：“健康谷物”，
品牌：“Kewl”
}, {
姓名：“约库里诺”，
类型：“嘎嘎声”，
品牌：“佐库”
}, {
名称：“Lokonoko”，
类型：'倾角调节器'，
品牌：“Loko”
}, {
名称：“Lokoboko”，
类型：'爱的座位'，
品牌：“Loko”
}]
$scope.showType=功能（项目）{
this.show=！this.show；
}
$scope.filterProducts=功能（品牌）{
返回函数（值）{
if（品牌）{
返回值。品牌===品牌；
}否则{
返回true；
}
}
}
})；

/*样式在这里*/
h1{
字体系列：影响；
}
氢{
字体系列：arial；
颜色：蓝色；
页边距底部：0；
}


{{brand.name}
展示品牌类型
{{brand.type}
{{product.name}
显示产品类型
{{product.type}

scope:true

-不是一个孤立的作用域，它是一个子作用域，而且

ng repeat

已经创建了与您的更新相关的自己的作用域，请参阅我回答中的“可选”部分

$scope.showType = function(item) {
    item.show = !item.show;
  }

this.show = !this.show

ng-init="show=false;"