角度过滤器嵌套属性清除答案

【问题标题】：angular filter nested property clear角度过滤器嵌套属性清除
【发布时间】：2016-11-08 18:10:31
【问题描述】：

我正在尝试对我的 JSON 对象的子元素应用过滤器。

效果很好，但是当我清除过滤器时，不显示没有我的子元素的属性。

你能帮我做这件事吗？

我无法修改 JSON 结构 JS代码：

'use strict';
angular.module('filterExample', [])
    .controller('filterController', ['$scope', function($scope) {
    $scope.amis =
        [{nom:'John', tel:'01-23-45-67-89', age:10, test:{id:3}},
         {nom:'Mary', tel:'02-34-56-78-91', age:19},
         {nom:'Mike', tel:'03-45-67-89-12', age:21, test:{id:5}},
         {nom:'Adam', tel:'04-56-78-91-23', age:35},
         {nom:'Julie', tel:'05-67-89-12-34', age:29, test:{id:7}}];
    }]);

HTLM 代码：

  <head>
    <meta charset="UTF-8" />
    <title>Exemple 2 du filtre filter</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="filterExample">
    <div ng-controller="filterController">
      <h4>Objet pour le prédicat</h4>
      <p>
        N'importe quel champ <i>(search.$)</i> : <input ng-model="search.$"> <br/>
        Seulement à partir du nom <i>(search.nom)</i> : <input ng-model="search.nom"><br/>
        Seulement à partir de l'âge <i>(search.age)</i> : <input ng-model="search.age"> <br/>
        Seulement à partir du téléphone <i>(search.tel)</i> : <input ng-model="search.tel"><br/>
        Seulement à partir test <i>(search.test.id)</i> : <input ng-model="search.test.id"><br/>
      </p>
      <table>
        <tbody>
          <tr>
            <th>Nom</th>
            <th>Âge</th>
            <th>Téléphone</th>
          </tr>
          <tr ng-repeat="ami in amis | filter:search">
            <td>{{ami.nom}}</td>
            <td>{{ami.age}}</td>
            <td>{{ami.tel}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

这是一个例子： https://plnkr.co/edit/7RlfmKU2UkM13z0ogwmh?p=preview

【问题讨论】：

标签： angularjs json

【解决方案1】：

您看到的原因是，一旦您“清除”了 id 过滤器，id 的值仍然是一个空字符串，因此过滤器仍在尝试匹配 test.id 属性，因此只会看起来在该财产的记录中。为了真正清除它，您需要设置取消设置 .test 属性。您可以通过为 id 过滤器添加监视并在它为空字符串时取消设置来做到这一点：

$scope.$watch('search.test.id', function(newVal, oldVal) {
    if (newVal !== undefined && newVal.length === 0) {
        $scope.search.test = undefined;
    }
});

【讨论】：