Question

我已经尝试了从角度到无序列表之一的过滤逻辑。但是，在键入名称的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>

JSON：

{

    "People":[
       {
          "name":"Andrew Amernante",
          "rating":3,
          "img":"http://www.fillmurray.com/200/200",
          "Description":"Glutenfree 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 gocart, powered by my ownsense of selfsatisfaction. 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":"Glutenfree 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”，您将得到两个结果，其中第一个（弗兰克·旺）不正确。

而且，这是我所引用的参考文献plnkr。

Answer 1

您需要指定哪个对象属性，在这种情况下，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的功能说明。

希望有帮助！

Answer 2

您可以创建自己的自定义过滤器，以指定需要搜索的属性：

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

否则，它将与您的searchText键匹配单个人对象的所有JSON值。

AngularJS过滤器搜索

2 个答案: