使用angularJS过滤PHP列表

Question

I am trying to create a blog page and I chose WordPress over AngularJS so Google can index the page ( or at least that's what i think it works). So for now I have a list which looks like this

<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>

but PHP is pretty static so I want to create a angular filter to filter posts by title, but I don't really know how to do this.

I was thinking to create a hide class for <li> items and somehow if a post should be deleted because of the filter, to add the hide class to it. I try to mix this angular so I can have a dynamic search instad loading the page again after searching.

Answer 1

You could create a directive to wrap the html content you receive from php, pass the filter term and which element of the list you want to check).

Here is a plunker: http://plnkr.co/edit/Bv2opi5CHfJa0pQyFrBc?p=preview

(this require jquery to hide and show, but you can use css({'display':'none|block'}) too)

(maybe you could modify the directive to apply the filter term to ignore the case of the words)

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>

Edit I updated the plunker with a more complete example than the code shown here.