Question

我正在构建一个旨在100％离线工作的应用，在第一页上使用ng-repeat显示阵列中的100个对象。

所有结果都记录在 LocalStorage 中并从中读取。

ng-repeat效果很好，但我正在构建一个过滤器并且想知道如何设置显示前100个项目列表中未包含的结果。

例如，我希望能够在日期范围内显示结果。所有对象都有一个日期属性，并且一旦选择了日期范围，DateRangePicker就可以与输入模型进行OK绑定，但是为了显示与此范围匹配的所有结果，我认为ng-repeat不再有用，因为必须能够调用LocalStorage并从那里检索数据。

我在概念上有点失落，这将是下一步，因为我的角色技能并不出色。

有关如何处理的任何指示？

以下是我当前的ng-repeat列表的样子：

<div class="row wop-row" 
     ng-repeat="record in recordlist | filter: search | limitTo : -100" 
     ng-class="{ 'wop-cancelled': record.cancelled, 'wop-commented' : record.comment}">
      <div class="col-md-1">{{record.date}}</div>
      <div class="col-md-1">{{record.time}}</div>
      <div class="col-md-1"><strong>{{record.car}}</strong></div>
      <div class="col-md-2">{{record.driver}}</div>
      <div class="col-md-2">{{record.from}}</div>
      <div class="col-md-1" ng-show="editItem == false" ng-hide="editItem">{{record.pax}}</div>
      <div class="col-md-1" ng-show="editItem == true && !record.arrival" ng-hide="!editItem">
        <select class="form-control" ng-model="record.pax">
            <option>Driver</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select>
      </div>
</div>

我的过滤器：

<form role="form">
  <div class="form-group col-md-3">
    <input type='text' 
           date-range-picker 
           placeholder="Date range" 
           class="form-control" 
           id="datetimepicker1" 
           data-date-format="DD/MM/YYYY" 
           ng-model="search.date"/>
  </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-1">
    <input class="form-control" placeholder="Pax" ng-model="search.pax">
  </div>
</form>

Answer 1

如果我理解你的问题，看来你基本上做的是正确的。您只需要将过滤器调用为对对象进行适当过滤的函数。

<div class="row wop-row" 
 ng-repeat="record in recordlist | filter: mysearch(record) | limitTo : -100" 
 ng-class="{ 'wop-cancelled': record.cancelled, 'wop-commented' : record.comment}">

然后

 $scope.mysearch = function(value) {

       return function(value) {
          // Do whatever the current filter is here. Like checking each 'value' to be
          // in a date range if the user has chosen a date. 
       }
 };

ng-repeat vs读取AngularJS中LocalStorage的特定结果

1 个答案: