Question

我正在尝试过滤静态无序列表中的字符串。我能够过滤数组中的项目，但不知道如何为静态html内容做到这一点。

我学习使用数组实现它的方法是使用这种方法：

<input type="search" ng-model="name" />

<ul>
    <li ng-repeat="person in people | filter:name">
    {{ person }}
    </li>
</ul>

我正在尝试使用现有的<ul>

达到相同的效果

<input type="search" ng-model="filter.name" placeholder="filter..." />

<ul>
   <li><a href="#bob">Bob</a>/li>
   <li><a href="#lisa">Lisa</a></li>
   <li><a href="#lewis">Lewis</a></li>
   <li><a href="#xuemin">Xuemin</a></li>
   <li><a href="#tom">Tom</a></li>
   <li><a href="#cassidy">Cassidy</a></li>
</ul>

我希望能够根据列表中的文本字符串过滤列表项，因此例如在文本框中键入“L”只会显示：

莉莎
路易斯

Answer 1

这是一种被砍掉的方式JSFiddle。

它的关键在于ng-change =“filter（）”。每次输入一个字母，您都可以决定显示或隐藏哪些元素。

$scope.filter = function() {
    var elem = document.getElementById('list');
    for (var i = 0; i < elem.children.length; i++) {
        var name = elem.children[i].children[0].innerHTML;
        if (name.indexOf($scope.name) != -1 || $scope.name == "") {
              elem.children[i].style.display = "block";
        } else {
            elem.children[i].style.display = "none";
        }
    }
}

就像我说的那样，这是一个丑陋的黑客，但它确实有效。你最好用你的名字制作一个物品，并使用ng-repeat。

Angularjs过滤无序列表

1 个答案: