4

我正在尝试创建一个博客页面，并且我选择了 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>项目创建一个隐藏类，并且以某种方式如果由于过滤器而应该删除帖子，则将隐藏类添加到其中。我尝试混合这个角度，以便在搜索后再次加载页面时进行动态搜索。

4

3 回答 3

3

考虑到您没有仅返回 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 列表，它将自动包含这些项目。

于 2013-10-02T17:34:22.550 回答
1

您可以创建一个指令来包装您从 php 收到的 html 内容，传递过滤器术语以及您要检查列表的哪个元素）。

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

（这需要 jquery 隐藏和显示，但您也可以使用 css({'display':'none|block'})）

（也许您可以修改指令以应用过滤器术语来忽略单词的大小写）

应用程序.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();
          })
        }
    }
}]);

索引.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。

于 2013-10-07T01:11:32.833 回答
0

如果您可以使用 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...'
    }
  ];
});

您甚至可以使用$httpservice 来检索 JSON 文件：

app.controller('MainCtrl', function($scope) {
  $scope.criteria = "Title";
  $scope.entries = $http.get('path/to/entries.json');
});
于 2013-10-02T15:00:43.960 回答