Javascript ng重复与从AngularJS中的本地存储读取特定结果

Javascript ng重复与从AngularJS中的本地存储读取特定结果,javascript,angularjs,Javascript,Angularjs,我正在构建一个应用程序,它可以100%脱机工作,在第一页使用ng repeat显示一个数组中的100个对象 所有结果都记录到LocalStorage并从中读取 ng repeat的工作非常出色,但我目前正在构建一个过滤器,我想知道如何才能显示未包含在前100项列表中的结果 例如,我希望能够在日期范围内显示结果。所有对象都有一个date属性,并且DateRangePicker可以在选择日期范围后与输入模型正常绑定,但是为了显示与此范围匹配的所有结果,我假设ng repeat不再有用,因为必须能够调

我正在构建一个应用程序,它可以100%脱机工作,在第一页使用ng repeat显示一个数组中的100个对象

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

ng repeat的工作非常出色,但我目前正在构建一个过滤器,我想知道如何才能显示未包含在前100项列表中的结果

例如,我希望能够在日期范围内显示结果。所有对象都有一个date属性,并且DateRangePicker可以在选择日期范围后与输入模型正常绑定,但是为了显示与此范围匹配的所有结果,我假设ng repeat不再有用,因为必须能够调用LocalStorage并从中检索数据

我在概念上有点迷失了下一步该做什么,因为我的角度技能并不出色

有关于如何继续的建议吗

以下是我当前的ng重复列表的外观:

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

如果我理解你的问题,看来你基本上是在做正确的事情。您只需要使过滤器调用一个对对象进行适当过滤的函数

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

因此,我可以制作一个自定义过滤器,它将循环遍历数组的所有对象并显示结果?基本上,当recordlist更改时,ng repeat中的项目列表将更新。我通常将整个列表保存为一个变量,如“completeList”,然后在另一个变量中显示列表,如“filteredList”。在ng repeat中使用“filteredList”。当用户单击某个日期时,您可以浏览completeList并仅使用适当的项目填充FiltereList。这将导致屏幕上的列表仅显示这些项目。有很多方法可以做到这一点,这只是其中之一。我发现这句话说:ngRepeat自动更新视图,以响应过滤器返回的项目数量的变化。这个过程对开发者来说是完全透明的,我从未见过这样做,用整个数组的过滤结果填充第二个列表。通常我只看到它从completeList一次过滤所有结果。你有什么例子吗?
 $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. 
       }
 };