0

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

问题
显示更多关于品牌的按钮也显示更多关于该品牌的每个产品，除非（这对我来说很奇怪）我首先单击该品牌中产品的按钮，在这种情况下它将正常工作。

CODE
请在此处查看 Plunker，请注意，当您单击品牌上的“显示类型”时，它还会显示该品牌内的所有产品类型： 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）添加一个属性并将对象传递给函数，然后将该属性更改为真/假，但我不想这样做，因为在我的实际应用程序中，该按钮将显示一个编辑品牌/产品并将信息提交给 Firebase 的表单，我不希望该对象具有“显示”属性。每次我想在 Firebase 中编辑信息时，我都不想删除“显示”属性。

4

3 回答 3

0

如果您不介意在数据中放置临时属性，最简单的解决方法是进行以下更改：

<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 数组，然后单击将对象推入或从显示的数组中删除对象。然后您可以检查对象在数组中是否存在，并适当地显示或不显示类型。让我知道你是否需要一个样本。

于 2016-01-31T07:32:38.207 回答
0

ng-repeat指令创建自己的范围，当你这样做

this.show = !this.show

您在当前范围内创建/更改show属性，如果单击品牌按钮 - 对于品牌范围，对于产品来说是全局的，当点击产品按钮时 - 对于范围具体产品。

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

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>

于 2016-01-31T08:14:31.813 回答
0

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

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

于 2016-01-31T06:42:04.950 回答