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

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 必须有一个空选项才能清除过滤器。当我当前执行 select 空选项时，它确实清除了，但是变化没有颜色不再出现。

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

Answer 1

我遇到了和你一样的问题。

您应该清空 'search' 对象。

因为你的 md-select 被清空后它看起来像这样 :

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

因此过滤器模型正在检查元素是否具有 variation.color

的任何值

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

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

Filter search ignore object if it's missing information

javascript

angularjs

angular-material