Фильтровать список PHP с angularJS

Question

Я пытаюсь создать страницу блога, и я выбрал 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 является довольно статичным, поэтому я хочу, чтобы создать угловой фильтр для фильтрации сообщений по заголовку, но я не знаю, как это сделать.

Я думал создать класс hide для <li> элементов и как-то, если сообщение должно быть удалено из-за фильтра, чтобы добавить к нему класс hide. Я пытаюсь смешать этот угловой, поэтому у меня может быть динамический поиск, загружающий страницу снова после поиска.

Answer 1

Вы можете создать директиву для переноса содержимого html, получаемого с php, передать член фильтра и какой элемент списка, который вы хотите проверить).

Вот plunker: http://plnkr.co/edit/Bv2opi5CHfJa0pQyFrBc?p=preview

(для этого необходимо JQuery, чтобы скрыть и показать, но вы можете использовать CSS ({ 'отображение': 'ни | блок'}) тоже)

(может быть, вы может изменить директиву применять термин фильтра игнорировать регистр слов)

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, то 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'); 
}); 

Answer 3

Учитывая, что у вас нет службы th at вернет только форматированные элементы 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 here. Перейдите и измените список HTML, и он автоматически включит эти элементы.