Filter PHP list using angularJS

Question

I'm trying to create a blog page, and I chose WordPress over AngularJS so that Google can index the page (or at least what I think it works). So at the moment I have a list that looks like

<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 an angular filter to filter messages by headers, but I really don't know how to do this.

I was thinking of creating a hide class for elements <li>, and somehow, if the message needs to be deleted because of the filter, to add the hide class to it. I am trying to mix this angular, so I can have a dynamic search loading the page again after the search.

Answer 1

html, php, , ).

: 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 , .

Answer 2

, , JSON, , li, ng-repeat . - :

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

app.directive('filtered', function() {
  return {
    scope: {
      criteria: '=filtered'
    },
    compile: function(elm, attr) {
      var entries = [];

      elm.find('li').each(function(index, item) {
        var entry;

        $item = angular.element(item);

        entries.push({
              id: $item.attr('id'),
          title: $item.find('h2').text(),
          body: $item.find('p').text()
        });
      }).remove();

      elm.append(
        '<li ng-repeat="entry in entries | filter:{title: criteria}" id={{entry.id}}>' +
          '<h2>{{entry.title}}</h2>' +
          '<p>{{entry.body}}</p>' +
        '</li>'
      );

      return function(scope) {
        scope.entries = entries;
      };
    }
  };
});

HTML :

<input ng-model="userCriteria">

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

Plnkr . HTML, .

Answer 3

JSON-, Angular .

:

<input ng-model="criteria"/>

<ul>
  <li ng-repeat="entry in entries | filter:{title: criteria}" id="{{entry.id}}">
    <h2>{{entry.title}}</h2>
    <p>{{entry.body}}</p>
  </li>
</ul>

( JS ):

app.controller('MainCtrl', function($scope) {
  $scope.criteria = "Title";

  $scope.entries = [
    {
      id: 1,
      title: 'My title',
      body: 'contents...'
    },
    {
      id: 2,
      title: 'The other content',
      body: 'contents...'
    },
    {
      id: 3,
      title: 'Another title',
      body: 'contents...'
    },
    {
      id: 4,
      title: 'Something completely different',
      body: 'contents...'
    }
  ];
});

$http JSON:

app.controller('MainCtrl', function($scope) {
  $scope.criteria = "Title";
  $scope.entries = $http.get('path/to/entries.json');
});