【问题标题】:Filter Number in an angular object using limitto使用limitto过滤角度对象中的数字
【发布时间】:2017-05-29 12:04:42
【问题描述】:

我在重复的项目数组上使用 angularjs 过滤器方法,并尝试使用 limitTo 过滤器过滤数字。结果未应用于 DOM 中的重复。

这里是html

<div ng-controller="demo as d">
      <input type="text" ng-model="d.test" ng-change="d.filterthis(d.test)"><br>
      <div ng-repeat="item in d.items | limitTo:d.limitto  track by $index">
            <span ng-show="!item.show">{{item.myno}}</span> - 
            <span ng-show="!item.show">{{$index}} - {{item.mystr}}</span><br>
      </div>
</div>

带有 angularjs 的 App.js 过滤功能

this.filterthis = function(filter){
    that.items.map(function(filter){

            return function(obj){
                obj.show=true;
                if(obj.myno.toString().indexOf(filter) >-1){
                    console.log(obj);
                    obj.show=false;
                }
                return obj;
            }
    }(filter));
};

Items 是这样的数组

this.items = [{
        show:false,
        myno:10,
        mystr:"test1"
    }];

http://plnkr.co/edit/bTdlTpSeZuPyGpolXLEG

【问题讨论】:

  • 您是否试图不返回根据输入字段中的值应用了show:true 的项目?
  • 那是相反的。很抱歉这种使用方法。你可以拿 show===hide 然后看看。过滤器是我的问题。请检查 plunkr
  • ng-show="!item.show"
  • 对,但您是否只想显示您正在搜索的前三个项目?并且不显示任何与搜索文本不匹配的内容?
  • 是的。如果我搜索 19,它应该显示 19,如果我搜索 1,它应该显示所有搜索的前三个,从 1 开始,限制为 3 个项目

标签: javascript angularjs angularjs-limitto array.prototype.map


【解决方案1】:

将“显示”作为项目的键,不会将其从ng-repeat 中删除,因此limitTo 过滤器仍将返回项目。相反,您应该像这样在重复中利用 filter 过滤器

<input type="text" ng-model="d.search"><br>
<div ng-repeat="item in d.items | filter:{myno:d.search} | limitTo:d.limitto track by $index">
    <span>{{item.myno}}</span> - 
    <span>{{$index}} - {{item.mystr}}</span><br>
</div>

注意这里的顺序很重要,如果你先limitTo 然后filter 你只是过滤了限制的结果。您可以通过将{myno:d.search} 更改为不同的键来更改您过滤的键,或者如果您想搜索整个对象,只需使用d.search

Updated Plunker

【讨论】:

  • 好酷。我有一个多重过滤器实现并且没有使用基于对象的过滤器。现在效果很好。这是我实际需要转换的。非常感谢... haxxxton。 ;-) plnkr.co/edit/bQh4MoOfTAx7IsMquswZ
猜你喜欢
  • 2014-11-10
  • 2017-03-21
  • 2020-05-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-20
  • 1970-01-01
相关资源
最近更新 更多