Question

摘要
我有一个品牌列表和一系列产品。我正在使用ng-repeat来显示品牌列表，并使用过滤器的ng-repeat来显示各自品牌的产品列表。我希望每个品牌和每个产品都有一个按钮，可以显示有关该品牌/产品的更多信息。 所有这些按钮应在控制器上使用相同的功能。

问题
显示该品牌的更多信息的按钮还会显示有关该品牌产品的更多信息，除非（这是我的奇怪部分）我点击了首先是该品牌中的产品按钮，在这种情况下它将正常工作。

代码
请在此处查看Plunker，并注意当您点击＆＃39;显示类型＆＃39;在品牌上，它还会显示该品牌中所有类型的产品：http://plnkr.co/edit/gFnq3O3f0YYmBAB6dcwe?p=preview

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>

JAVASCRIPT

var app = angular.module('myApp', []);

app.controller('MyController', function($scope) {

  $scope.brands = [{
    name: 'Kewl',
    type: 'Cereal'
  }, {
    name: 'Joku',
    type: 'Toy'
  }, {
    name: 'Loko',
    type: 'Couch'
  }]

  $scope.products = [{
    name: 'Kewlio',
    type: 'Sugar Cereal',
    brand: 'Kewl'
  }, {
    name: 'Kewliano',
    type: 'Healthy Cereal',
    brand: 'Kewl'
  }, {
    name: 'Jokurino',
    type: 'Rattle',
    brand: 'Joku'
  }, {
    name: 'Lokonoko',
    type: 'Recliner',
    brand: 'Loko'
  }, {
    name: 'Lokoboko',
    type: 'Love Seat',
    brand: 'Loko'
  }]

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

  $scope.filterProducts = function(brand) {
    return function(value) {
      if(brand) {
        return value.brand === brand;
      } else {
        return true;
      }
    }
  }
});

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

Answer 1

整个树的show布尔属性相同（在同一范围内）。在scope:true中使用带有子范围ng-repeat的angular指令有助于隔离每个show属性。我已经把你的plunker代码分开了：

http://plnkr.co/edit/cMSvyfeCQOnTKG8F4l55?p=preview

Answer 2

对此最简单的解决方法是，如果您不介意在数据中添加临时属性，请执行以下更改：

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

和

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

然后在你的控制器中

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

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

Answer 3

当你做

时，

ng-repeat指令创建自己的范围

this.show = !this.show

您在当前范围内创建/更改show媒体资源（如果点击品牌按钮） - 品牌范围，产品全球范围以及点击< em> product 按钮 - 适用于范围的具体产品。

要避免这种情况，您应该在点击按钮之前创建此属性，例如使用ng-init，例如

ng-init="show=false;"

带有`ng-repeat“指令的元素

样品

var app = angular.module('myApp', []);

app.controller('MyController', function($scope) {

  $scope.brands = [{
    name: 'Kewl',
    type: 'Cereal'
  }, {
    name: 'Joku',
    type: 'Toy'
  }, {
    name: 'Loko',
    type: 'Couch'
  }]

  $scope.products = [{
    name: 'Kewlio',
    type: 'Sugar Cereal',
    brand: 'Kewl'
  }, {
    name: 'Kewliano',
    type: 'Healthy Cereal',
    brand: 'Kewl'
  }, {
    name: 'Jokurino',
    type: 'Rattle',
    brand: 'Joku'
  }, {
    name: 'Lokonoko',
    type: 'Recliner',
    brand: 'Loko'
  }, {
    name: 'Lokoboko',
    type: 'Love Seat',
    brand: 'Loko'
  }]

  $scope.showType = function(item) {
    this.show = !this.show;
  }

  $scope.filterProducts = function(brand) {
    return function(value) {
      if (brand) {
        return value.brand === brand;
      } else {
        return true;
      }
    }
  }

});

/* Styles go here */

h1 {
  font-family: impact;
}
h2 {
  font-family: arial;
  color: blue;
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyController as vm">
    <div ng-repeat="brand in brands" ng-init="show=false">
      <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)" ng-init="show=false">
        <h2>
           {{product.name}}
        </h2>
        <button ng-click="showType(product)">
          Show Product Type
        </button>
        <div ng-show="show">
          {{product.type}}
        </div>
      </div>
    </div>
  </div>
</div>

Angular - 我可以在嵌套的ng-repeat中的多个对象上使用单个函数来触发该对象的ng-show吗？

3 个答案: