Question

我有一个由瓷砖构成的页面（想象一下带有缩略图和标题的div列表） - 每个瓷砖＆＃39;可以有几个归属于他们的标签..

例如：

图块1包含以下标记：foo，bar，baz，quz
tile 2具有以下标记：foo，bar，baz
tile 3具有以下标记：bar，baz
tile 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>

角度方式很新，但基本上为了使用ng-hide / ng-show我已经在控制器$scope中创建了数组 - 见上文，所以当showFiles.filters [＆＃39; tile.filetype＆＃39;]设置为true（例如通过onclick通过另一个过滤器菜单上的指令），磁贴将显示或隐藏..

问题：由于每个磁贴可能有多个标记 - 在上面的示例中使用ng-show的最佳方法是什么？我如何迭代标签数组 - 但保持在<div>范围内？是否有可能在一个元素上有2 ng-repeat个或者我必须创建几个虚拟<div>包装器，只是为了将ng-show="filterByTag['foo']"应用于图块

json的例子：

"tiles" : {
..
.
"filetype" : "pdf",
"name" : "this is tile 1!",
..

 "tags":[  
  {  
    "id":1,
    "name":"foo"
  },
  {  
    "id":2,
    "name":"bar"
  },
  {  
    "id":3,
    "name":"baz"
  }
  ..
 ]
 ..
}

Answer 1

更好的角度方法是根据选定的标签过滤器过滤瓷砖阵列。

<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>

Answer 2

你想做的是我会说有点不正确。角度中有过滤器可用于过滤数据，但为此您需要更新模型ng-model。我想你应该这样做：

标记：

<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>

在上面的标记中，您可以看到我们有三个按钮，其中包含foo, bar, baz等不同的ID，这些按钮还有两个指令ng-model和ng-model-options以及您拥有ng-repeat和ng-repeat="tile in tiles | filter:clickedItem.item"的指令1}}你必须有一个过滤器，你可以在标记中看到ng-model-options="{updateOn:'click'}"。

现在每当模型更新时，您都可以看到差异。只有在您使用click时才会发生这种情况，该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 }); } }; });表示按钮上发生ng-required时更新模型。

angularjs代码：

<input id="id" class="form-control" name="thename" type="text" ng-required="required">

将ng-repeat嵌套在一个元素上进行过滤

2 个答案:

标记：

angularjs代码：

See the demo @ plnkr.