用angularJS过滤PHP列表

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是非常静态的，所以我想创建一个角度滤波，以滤除标题帖子列表，但我真的不知道如何做到这一点。

我正在考虑为<li>项目创建一个隐藏类，并且如果由于过滤器而应该删除某个帖子，请将隐藏类添加到它。我尝试混合这个角度，这样我就可以有一个动态搜索单元在搜索后再次加载页面。

Answer 1

你可以创建一个指令来包装你从php接收的html内容，传递过滤条件和你想检查的列表中的哪个元素）。

这里是一个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

考虑到您没有服务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列表，它会自动包含这些项目。