javascript – 使用angularJS过滤PHP列表

我正在尝试创建一个博客页面,我选择了wordpress而不是AngularJS,这样Google就可以为该页面编制索引(或者至少是我认为它的工作原理).所以现在我有一个看起来像这样的列表

<ul>
    <li id="1">
        <h2>My first Post</h2>
        <p>The Message...</p>
    </li>
    <li id="2">
        <h2>My second Post</h2>
        <p>The Message...</p>
    </li>
    <li id="3">
        <h2>My third Post</h2>
        <p>The Message...</p>
    </li>
</ul>

但PHP非常静态所以我想创建一个角度过滤器来按标题过滤帖子,但我真的不知道如何做到这一点.

我正在考虑为< li>创建一个隐藏类.如果由于过滤器而应删除帖子,则以某种方式将项目添加到其中.我尝试混合这个角度,所以我可以在搜索后再次加载页面的动态搜索instad.

解决方法:

您可以创建一个指令来包装从PHP接收的html内容,传递过滤器术语以及要检查的列表中的哪个元素.

这是一个plunker：http://plnkr.co/edit/Bv2opi5CHfJa0pQyFrBc?p=preview

(这需要jquery隐藏和显示,但你也可以使用css({‘display’：’none | block’}))

(也许你可以修改指令来应用过滤词来忽略单词的情况)

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.model = {
        filter: ''
    };
});

app.directive('myHtmlFilter', [function() {
    return {
        restrict: 'A',
        scope: {
          filter: '=myHtmlFilter',
          element: '@'
        },
        link: function(scope, elem, attrs) {
          scope.$watch('filter', function(newval, oldval) {
            elem
              .find('ul>li')
                  .hide()
                  .find(scope.element)
                  .filter(':contains("'+scope.filter+'")')
               .parent()
                  .show();
          })
        }
    }
}]);

的index.html

<input type="text" ng-model="model.filter" />

<div my-html-filter="model.filter" element="h2">
  <ul>
    <li id="1">
        <h2>My first Post</h2>
        <p>The Message...</p>
    </li>
    <li id="2">
        <h2>My second Post</h2>
        <p>The Message...</p>
    </li>
    <li id="3">
        <h2>My third Post</h2>
        <p>The Message...</p>
    </li>
  </ul>
</div>

编辑我使用比此处显示的代码更完整的示例更新了plunker.