Question

我有一个看起来像这样的ng-repeat：

<div layout="row" flex layout-wrap layout-margin layout-padding>
     <tile ng-repeat="camp in ctrl.camps | filter:{ctrl.search} track by $index"></tile>
</div>

ctrl.camps是一个对象数组，如下所示：

{
  "id": 1,
  "name": "Hey!",
  "kind": "Something",
  "variation": {
      "type": "Smarty",
      "color": "Blue",
   }
},
{
  "id": 2,
  "name": "More Heys!",
  "kind": "Another thing",
  "variation": {
      "type": "Smarty",
      "color": "Green",
   }
},
{
  "id": 3,
  "name": "Hey!",
  "kind": "my kind",
  "variation": {
      "type": "Smarty"
   }//  This one doesn't have a color!
}

请注意id: 3如何变色。

现在，我使用md-select过滤这些内容，如下所示：

<md-input-container>
    <label>Variation color</label>
    <md-select ng-model="ctrl.search.variation.color">
         <md-option ng-click="!null">Empty option</md-option> //I want to be able to clear this selection with the ng-click.. Not sure how.
         <md-option ng-repeat="color in ctrl.colors" value="{{color}}">{{color}}</md-option>
     </md-select>
 </md-input-container>

所以这很有效。它会过滤我的列表和所有内容。但是，我遇到的问题是md-select必须有一个空的选项才能清除过滤器..当我确实选择当前的空选项时，它确实清除，但没有颜色的变化没有＆＃ 39;重新出现。

有人知道我怎么可能解决这个问题吗？我希望能够使用ng-click清除，但我需要再次显示所有对象。谢谢。

Answer 1

我遇到了像你这样的问题。

您应该清空“搜索”对象。

因为，在清空md-select后，它看起来像这样：

{
  "variation": {color:""}
}

所以Filter-model正在检查元素是否包含variation.color

的任何值

您可以向ng-change添加功能，检查search.variation.color是否为空，然后将其删除：delete search.variaton.color上的$watch或$scope.search

过滤搜索忽略对象，如果它缺少信息

1 个答案: