代码之家 › 专栏 › 技术社区 › UI_Dev

AngularJS过滤器搜索

angularjs-filter filter angularjs javascript

UI_Dev · 技术社区 · 8 年前

我尝试过从角度到无序列表的过滤逻辑。但是,搜索过滤器在输入3个字符的名称后工作,有时会给出错误的搜索结果。

 <input type='text' ng-model='searchString' placeholder="Search a name..." />


<ul class="nav">
     <li class="active" ng-repeat="item in artists.People | filter :searchString">
           <a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
     </li>
 </ul>

杰森:

{

    "People":[
       {
          "name":"Andrew Amernante",
          "rating":3,
          "img":"http://www.fillmurray.com/200/200",
          "Description":"GlutenÂfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
          "Likes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ],
          "Dislikes":[
             "Birds",
             "Red things",
             "Danish food",
             "Dead Batteries"
          ]
       },
       {
          "name":"Frank Wang",
          "rating":5,
          "img":"http://www.fillmurray.com/200/201",
          "Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
          "Likes":[
             "Frank",
             "Manchester United",
             "Football",
             "Programming"
          ],
          "Dislikes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ]
       },
       {
          "name":"Sissi Chen",
          "rating":5,
          "img":"http://www.fillmurray.com/200/202",
          "Description":"Aaah! Natural light! Get it off me! Get it off me! Oh, loneliness and cheeseburgers are a dangerous mix. D'oh. Here's to alcohol, the cause of all life's problems.",
          "Likes":[
             "Cats",
             "the beach",
             "Chopin",
             "Blue things"
          ],
          "Dislikes":[
             "Birds"
          ]
       },
       {
          "name":"Diego Garcia",
          "rating":2,
          "img":"http://www.fillmurray.com/200/204",
          "Description":"Facts are meaningless. You could use facts to prove anything that's even remotely true! I prefer a vehicle that doesn't hurt Mother Earth. It's a goÂcart, powered by my ownsense of selfÂsatisfaction. You don't win friends with salad.",
          "Likes":[
             "Talking Spanish",
             "Spanish food",
             "Spanish things",
             "Football"
          ],
          "Dislikes":[
             "Not talking spanish",
             "Chopin"
          ]
       },
       {
          "name":"Fuad Rashid",
          "rating":4,
          "img":"http://www.fillmurray.com/200/206",
          "Description":"GlutenÂfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
          "Likes":[
             "Dogs",
             "Long walks on the beach",
             "Chopin",
             "Tacos"
          ],
          "Dislikes":[
             "Birds",
             "Red things",
             "Danish food",
             "Dead Batteries"
          ]
       }
    ]
 }

这是 plnkr 代码。

例:开始输入“si”,你会得到两个结果,第一个(Frank Wang)不正确。

这是参考资料 plnkr 我指的是哪里。

2 回复 | 直到 8 年前

Alexander Staroselsky 8 年前

在这种情况下,您需要指定哪个对象属性 name 对于 filter 筛选依据:

<input type='text' ng-model='searchString' placeholder="Search a name..." />

<ul class="nav">
  <li class="active" ng-repeat="item in artists.People | filter: { name: searchString }">
    <a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
  </li>
</ul>

您需要设置 searchString 空字符串,以及在没有输入文本时与所有人匹配。

$scope.searchString = '';

这是一个 Plunker 演示功能。

希望有帮助!

Hardik Shah 8 年前

您可以创建自己的自定义筛选器,以指定需要搜索的属性:

$scope.searchTextByName = function(artist){
    if($scope.searchText !== undefined){
        if(artist.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) > -1 ){
           return artist;
        }
    }
}

否则,它将使用您的SearchText键匹配单个人员对象的所有JSON值。