当对象属性为空时，使用AngularJS过滤ng重复

Filtering ng-repeat when object property is empty with AngularJS

本文关键字：AngularJS 使用 过滤 ng 重复 对象 属性      更新时间：2023-09-26

我有一个具有多个属性的对象数组。所有这些对象都有一个object.comment属性，但在某些对象中填充了字符串（'comment' : 'comment text'），而其他对象为空（'comment' : ''）。

我用一个类似的ng重复列出结果：

<div class="row msf-row" 
     ng-repeat="record in filteredRecords = (recordlist | filter:dateFilter | filter: search )" 
>

我试图实现的是添加一个复选框过滤器，以便在选中复选框时仅显示object.comment属性所填充的结果，而在取消选中时显示所有结果。

到目前为止，我的过滤器是这样的：

<form role="form">
            <div class="form-group col-md-3">
              <input type='daterange' 
              placeholder="Date range" 
              class="form-control"
              format="DD/MM/YYYY" 
              ng-model="dates"
              ranges="ranges" />
            </div>
            <div class="form-group col-md-1">
              <input class="form-control" placeholder="Time" ng-model="search.time">
            </div>
            <div class="form-group col-md-1">
              <input class="form-control" placeholder="Car" ng-model="search.car">
            </div>
            <div class="form-group col-md-2">
              <input class="form-control" placeholder="Driver" ng-model="search.driver">
            </div>
            <div class="form-group col-md-2">
              <input class="form-control" placeholder="From" ng-model="search.from">
            </div>
            <div class="form-group col-md-2">
              <input class="form-control" placeholder="Destination" ng-model="search.destination">
            </div>
            <div class="form-group col-md-1">
              <input class="form-control" placeholder="Pax" ng-model="search.pax">
            </div>
            <div class="col-md-1">
              <div class="checkbox">
                <label>
                  <input type="checkbox" 
                         ng-model="search.cancelled" 
                         ng-change="search.cancelled = search.cancelled ? true : undefined"
                  > Cancelled 
                </label>
              </div>
            </div> 
            <div class="col-md-2">
              <div class="checkbox">
                <label>
                  <input type="checkbox" 
                         ng-model="search.comment" 
                         ng-change="search.comment = search.comment ? true : undefined"
                  > Commented records
                </label>
              </div>
            </div>
</form>

正如您所看到的，我已经有了一个过滤器，可以判断object.cancelled是true还是false，但当object.comment为空或有字符串时，我没有做到这一点。

有指针吗？

您可以创建自定义过滤器，请参阅下面的演示

app.filter('emptyString', [
  function() {
    return function(input, param) {
      if (!param) return input
      var ret = [];
      if (!angular.isDefined(param)) param = true;

      if (param) {
        angular.forEach(input, function(v) {
          if (angular.isDefined(v.comment) && v.comment) {
            v.comment = v.comment.replace(/^'s*/g, '');
            ret.push(v);
          }
        });
      }

      return ret;
    };
  }
])


var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
  $scope.recordlist = [{
      time: "10/11/2014",
      comment: "super"
    }, {
      time: "10/11/20004",
      comment: ""
    }, {
      time: "10/11/2005",
      comment: ""
    }, {
      time: "11/1/2014",
      comment: "that was ok"
    }
  ];
});
app.filter('emptyString', [
  function() {
    return function(input, param) {
      if (!param) return input
      var ret = [];
      if (!angular.isDefined(param)) param = true;
      if (param) {
        angular.forEach(input, function(v) {
          if (angular.isDefined(v.comment) && v.comment) {
            v.comment = v.comment.replace(/^'s*/g, '');
            ret.push(v);
          }
        });
      }
      return ret;
    };
  }
])
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <form role="form">
      <div class="form-group col-md-3">
        <input type='daterange' placeholder="Date range" class="form-control" format="DD/MM/YYYY" ng-model="dates" ranges="ranges" />
      </div>
      <div class="form-group col-md-1">
        <input class="form-control" placeholder="Time" ng-model="search.time">
      </div>
      <div class="form-group col-md-1">
        <input class="form-control" placeholder="Car" ng-model="search.car">
      </div>
      <div class="form-group col-md-2">
        <input class="form-control" placeholder="Driver" ng-model="search.driver">
      </div>
      <div class="form-group col-md-2">
        <input class="form-control" placeholder="From" ng-model="search.from">
      </div>
      <div class="form-group col-md-2">
        <input class="form-control" placeholder="Destination" ng-model="search.destination">
      </div>
      <div class="form-group col-md-1">
        <input class="form-control" placeholder="Pax" ng-model="search.pax">
      </div>
      <div class="col-md-1">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="search.cancelled" ng-change="search.cancelled = search.cancelled ? true : undefined">Cancelled
          </label>
        </div>
      </div>
      <div class="col-md-2">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="search.comment">Commented records
          </label>
        </div>
      </div>
    </form>
    <div class="container">
      <div class="row " ng-repeat="record in filteredRecords = (recordlist |  emptyString : search.comment   )">
        <div class="col-xs-12" <span class="label">{{record.time}} <span> <strong>{{record.comment}}</strong></p> </div>
    </div>
    </div>
  </div>

一个简单的解决方案是使用ng-hide指令：

<div class="row"
    ng-repeat="record in filteredRecords"
    ng-hide="search.comment && (!record.comment || record.comment === '')">
</div>

它的意思是：如果选中了search.comment，而record.comment未定义或为空，则隐藏此元素。

看看这个plunker：http://plnkr.co/edit/m8rA0rVxqgWS0NWukJdf?p=preview

这是预期行为吗？

相关文章：