Angularjs 使用ng repeat自定义数据筛选-实现ng模型_Angularjs_Filtering_Angular Ngmodel

Angularjs 使用ng repeat自定义数据筛选-实现ng模型

angularjs

Angularjs 使用ng repeat自定义数据筛选-实现ng模型,angularjs,filtering,angular-ngmodel,Angularjs,Filtering,Angular Ngmodel,我已编辑代码并将筛选移到控制器 <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">

我已编辑代码并将筛选移到控制器

<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>

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

请考虑以下示例

此

过滤器

最初显示所有

项目

，但单击链接将应用传递给自定义过滤器的可选参数

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>

此处的相关plunker

将过滤器移动到控制器中的一个函数，并使用

ng click

单击按钮时的数据调用它。我这样做了，但我认为可能有更好的解决方案，我可以实现ng模型谢谢你Mikko，我将使用此代码，看看我得到了什么，也许你设置了一个plunker/fiddle？我已经编辑了我的代码，现在我已经将所有代码移到了控制器上，并试图使它变得简单

<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>

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;
    }
  };
});