Javascript ng重复与从AngularJS中的本地存储读取特定结果
我正在构建一个应用程序,它可以100%脱机工作,在第一页使用ng repeat显示一个数组中的100个对象 所有结果都记录到LocalStorage并从中读取 ng repeat的工作非常出色,但我目前正在构建一个过滤器,我想知道如何才能显示未包含在前100项列表中的结果 例如,我希望能够在日期范围内显示结果。所有对象都有一个date属性,并且DateRangePicker可以在选择日期范围后与输入模型正常绑定,但是为了显示与此范围匹配的所有结果,我假设ng repeat不再有用,因为必须能够调用LocalStorage并从中检索数据 我在概念上有点迷失了下一步该做什么,因为我的角度技能并不出色 有关于如何继续的建议吗 以下是我当前的ng重复列表的外观:Javascript ng重复与从AngularJS中的本地存储读取特定结果,javascript,angularjs,Javascript,Angularjs,我正在构建一个应用程序,它可以100%脱机工作,在第一页使用ng repeat显示一个数组中的100个对象 所有结果都记录到LocalStorage并从中读取 ng repeat的工作非常出色,但我目前正在构建一个过滤器,我想知道如何才能显示未包含在前100项列表中的结果 例如,我希望能够在日期范围内显示结果。所有对象都有一个date属性,并且DateRangePicker可以在选择日期范围后与输入模型正常绑定,但是为了显示与此范围匹配的所有结果,我假设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>
如果我理解你的问题,看来你基本上是在做正确的事情。您只需要使过滤器调用一个对对象进行适当过滤的函数
<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.
}
};