使用 ng-repeat 进行自定义数据过滤 - 实现 ng-model答案

【问题标题】：custom data filtering with ng-repeat - implement ng-model使用 ng-repeat 进行自定义数据过滤 - 实现 ng-model
【发布时间】：2017-05-28 22:49:21
【问题描述】：

我已经编辑了我的代码并将过滤器移到了我的控制器中

<div class="tab t-1" 
     ng-class="{'active' : legals.activeTab === 1}" 
     ng-show="legals.activeTab === 1">
  <br>
    <label>
      Sort by
      <select ng-model="sortProp" class="input-medium">
        <option value="price">price</option>
        <option value="minutes">minutes from the nearest station</option>
      </select>
   </label>
    <select ng-model="locationFilter" ng-options="l as l for l in found">
      <option value="">all</option>
    </select>
    <div class="form-group">
      <input type="checkbox" ng-click="findRecent()" ng-checked=""/> from the last 7 days
    </div>
  <div ng-repeat="value in all | filter: recentFilter | orderBy:sortProp">
    <ul>
      <li><strong>{{value.id}}</strong></li>
      <li><strong>{{value.address}}</strong></li>
      <li>city: {{value.city}}</li>
      <li>postcode: {{value.postcode}}</li>
      <li>price: {{value.price}}</li>
      <li>num_of_beds: {{value.num_of_beds}}</li>
      <li>{{value.type}}</li>
      <li>{{value.minutes}}</li>
      <li>{{value.added}}</li>
    </ul>
  </div>
</div>

我将过滤器代码移动到我的控制器并尝试在 html 中使用它

var isContractEndDate = function(endDate) {
  var DAYS_UNTIL_END = 8;

  endDate = new Date(endDate);
  var lastDate = new Date(new Date().setDate(new Date().getDate() - DAYS_UNTIL_END));

  if (endDate > lastDate) {
    return true;
  }
  return false;
};

$scope.foundRecent = [];
$scope.lookup = {};

$scope.findRecent = function() {
  angular.forEach($scope.all, function(value, key) {
    $scope.lookup = value;
    if (isContractEndDate($scope.lookup.added)) {
      $scope.foundRecent.push($scope.lookup);
    }
  });
  return $scope.foundRecent;
};

$scope.recentFilter = function(searchResults) {
  if ($scope.findRecent.length > 0) {
    return searchResults;
  }
};

但是它也没有过滤，我认为recentFilter函数存在一些问题

【问题讨论】：

将过滤器移动到控制器中的一个函数，并使用ng-click使用单击按钮时的数据调用它
我这样做了，但我认为也许有更好的解决方案，我可以实现 ng-model

标签： angularjs filtering angular-ngmodel

【解决方案1】：

考虑以下示例。

此filter 最初显示您的所有items，但单击链接会应用传递给您的自定义过滤器的可选参数。

HTML

<body ng-controller="Ctrl">
  <div>
    Current condition: {{ condition ? (condition | json) : 'none' }}
    &nbsp;
    <input type="button" ng-click="condition = null" value="Clear">
  </div>

  <br>
  {{ condition ? 'Filtered items' : 'All items' }}

  <ul ng-repeat="item in items | myFilter:condition">
    <li>
      <span ng-repeat="(key, value) in item">      
        <a href ng-click="setCondition(key, value)">{{ value }}</a>&nbsp;
      </span>
    </li>
  </ul>
</body>

JavaScript

angular.module('app', [])

.controller('Ctrl', function($scope) {
  $scope.items = [{
    name: 'Mike',
    gender: 'M',
    city: 'London'
  },{
    name: 'Jake',
    gender: 'M',
    city: 'Helsinki'
  },{
    name: 'Cindy',
    gender: 'F',
    city: 'Helsinki'
  }];

  $scope.setCondition = function(key, value) {
    $scope.condition = {
      key: key,
      value: value
    };
  };
})

.filter('myFilter', function() {
  return function(data, condition) {
    if (!condition) {
      return data;
    } else {
      var filtered = [];
      angular.forEach(data, function(current) {
        if (current[condition.key] === condition.value) {
          this.push(current);
        }
      }, filtered);
      return filtered;
    }
  };
});

相关plunker在这里https://plnkr.co/edit/GHOpSw

【讨论】：

谢谢 Mikko 我会用这段代码来看看我得到了什么
好吧，也许你设置了一个 plunker/fiddle？
我已经编辑了我的代码，现在我已经将所有代码移动到控制器并试图让它变得简单