Javascript 在一个元素上嵌套ng repeat以进行筛选

我有一个由平铺组成的页面（想象一个带有缩略图和标题的div列表）——每个“平铺”都可以有几个标签

例如：

• 磁贴1具有以下标签：

  foo

  ，

  bar

  ，

  baz

  ，

  quz

• 磁贴2具有以下标签：

  foo

  ，

  bar

  ，

  baz

• 磁贴3具有以下标签：

  bar

  ，

  baz

• 磁贴4具有以下标签：

  baz

  ，

  quz

  .. 等等

在页面顶部有一个简单的过滤器菜单，每个标签都可以在列表中单击

单击过滤器菜单中的标记（例如

foo

）时，隐藏未将

foo

标记归属于它的任何磁贴。在这种情况下，瓷砖3和4将从视图中移除

每个磁贴都有以下模板，但我需要扩展它以合并标记过滤

<div ng-repeat="tile in tiles" class="col-md-2" ng-show="showFiles.filters[tile.filetype]">
  <div class="sc-file-container">
    <h3>{{tile.name}}</h3> // add image here too
  </div>
</div>

---

在angular中执行此操作的更好方法是基于选定的标记过滤器过滤瓷砖阵列

<div ng-repeat="tile in filteredTiles" class="col-md-2">
   <div class="sc-file-container">
      <h3>{{tile.name}}</h3> // add image here too
   </div>
</div>

<script>
     var filteredTiles = [];
     // Logic to filter tiles based on selected tag in filter

</script>

{{tile.name}//也在此处添加图像
var filteredTiles=[]；
//根据过滤器中选定的标记过滤磁贴的逻辑

你想做的是我会说有点不对。在angular中有可用的过滤器来过滤数据，但为此，您需要更新模型

ng model

。我想你应该这样做：

标记：

---

您应该实现一个指令并根据过滤器呈现html模板。您不必使用ng repeat，因为您的指令可以完成这项工作。如果我以后有更多的时间，我将尝试展示一个例子。否则（简单方法），请使用jQuery，这样如果filteredTiles对象得到更新-比如说从对象中删除一个项目（当它被过滤时）这是否反映在ng repeat中？是的，当您更新范围时。filteredTiles对象更改将在视图中重新受影响非常好-我可以放弃所有ng show代码，只需在ng repeat中更新对象。我没意识到我能做到。。！干杯

<div ng-repeat="tile in filteredTiles" class="col-md-2">
   <div class="sc-file-container">
      <h3>{{tile.name}}</h3> // add image here too
   </div>
</div>

<script>
     var filteredTiles = [];
     // Logic to filter tiles based on selected tag in filter

</script>

<div ng-controller="MainCtrl">
  <button id='foo' ng-model='clickedItem.item' ng-model-options="{ updateOn: 'click' }" ng-btn>Foo</button>
  <button id='bar' ng-model='clickedItem.item' ng-model-options="{ updateOn: 'click' }" ng-btn>Bar</button>
  <button id='baz' ng-model='clickedItem.item' ng-model-options="{ updateOn: 'click' }" ng-btn>Baz</button>
  <div ng-repeat="tile in tiles | filter:clickedItem.item" class="col-md-2">
    <div class="sc-file-container">
      <h3>{{tile.name}}</h3>
    </div>
  </div>
</div>

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

app.controller('MainCtrl', function($scope) { // controller
  $scope.clickedItem = {}; // holds the clicked button's id
  $scope.tiles = [{name: 'foo'}, {name: 'bar'}, {name: 'baz'}];
}).directive('ngBtn', function(){
  return {
    link:function(scope, elem, attrs){
      angular.element(elem).on('click', function(){ // click on button
        scope.clickedItem.item = this.id; // update clickedItem
      });
    }
  };
});