AngularJS-具有自定义ng-hide函数的ng-repeat

Question

我正在尝试显示按URL哈希值过滤的博客帖子结果的简单列表。

我将此作为参考： http : //www.bennadel.com/blog/2487-filter-vs-nghide-with-ngrepeat-in-angularjs.htm

JSON：

 "nodes": [
      {
        "node": {
          "title": "Lorem ipsum dolor sit amet",
          "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nunc ante, ultrices non justo sed, interdum dictum diam. Aliquam erat volutpat. Donec orci sapien, facilisis vehicula dui non, interdum gravida tortor. Suspendisse mollis enim purus, eu ornare erat semper id. In ac molestie lorem. Nullam bibendum non augue eu viverra. Phasellus interdum sem quis blandit sagittis.\nVivamus mollis tortor ligula, eu porttitor nisi tempor sit amet. Integer vitae suscipit quam, sit amet pharetra justo. Integer erat dolor, venenatis a imperdiet in, mattis in dui. Nunc aliquet dictum tellus a maximus. Nam a semper tortor. Phasellus maximus congue vehicula. Nullam purus purus, auctor ac est et, varius fermentum augue.\nPellentesque ante erat, pretium cursus dolor id, rhoncus sagittis justo. Pellentesque convallis ante fringilla velit iaculis, id condimentum turpis laoreet. Maecenas non nisi et dui mollis malesuada. Proin viverra vel erat vel interdum. Suspendisse condimentum, enim nec porttitor euismod, turpis odio pharetra neque, ac condimentum tellus quam vel sapien. Sed ut vehicula ligula. In nec nunc metus. Donec eget interdum velit.\n",
          "photo": "http:\/\/local.bpdnew.com\/sites\/default\/files\/styles\/blog_-_landing_page_results\/public\/Cary1515building.jpg?itok=eSxNzF7a",
          "tags": "Healthcare, Bicycle, Pickles",
          "link": "\/content\/lorem-ipsum-dolor-sit-amet"
        }
      },
      {
        "node": {
          "title": "Curabitur sit amet arcu non orci porttitor cursus",
          "body": "Curabitur sit amet arcu non orci porttitor cursus. Curabitur semper erat nisl, nec placerat nunc tincidunt consectetur. Proin a feugiat magna. Ut vel magna at velit tempus ornare tempus malesuada nunc. Duis pellentesque molestie ipsum, id luctus mi lobortis sit amet. Aliquam consectetur purus ultrices tortor porta, et consequat nisi volutpat. Proin nec commodo mauris. Etiam sodales bibendum iaculis. Curabitur at tempor ligula. Aliquam sapien mi, mattis nec aliquam elementum, tempus a orci. Pellentesque erat nisi, tempor non mi et, lobortis gravida nunc. Etiam lectus tellus, porttitor quis congue quis, viverra luctus massa. Donec finibus leo at purus congue, consequat ullamcorper massa aliquam. Phasellus felis odio, aliquet et enim sit amet, eleifend pharetra orci. Vestibulum fermentum ligula neque, et scelerisque purus vulputate in. Curabitur ligula risus, imperdiet vitae justo quis, auctor rhoncus eros.\nMaecenas iaculis suscipit neque, sed imperdiet urna fringilla eu. Maecenas arcu augue, venenatis nec pharetra quis, consequat sed tortor. Ut mattis posuere vulputate. Aenean in eleifend quam. Quisque ultricies neque sed molestie semper. Ut ullamcorper nisl nisl, non facilisis enim rhoncus sit amet. Morbi condimentum convallis justo eu ultricies. Ut consequat imperdiet congue. Sed bibendum dictum quam. Nulla nulla sem, tempor vel mi id, posuere porta purus. Sed elementum lacinia orci sagittis consectetur. Donec non augue rutrum, blandit est tempus, scelerisque ante. Nulla quis nisl elementum, aliquet metus vel, sodales augue. Integer auctor sed lectus vel tristique.\n",
          "photo": "http:\/\/local.bpdnew.com\/sites\/default\/files\/styles\/blog_-_landing_page_results\/public\/hero_0.jpg?itok=Ra7m3QYS",
          "tags": "Lorem Ipsum, Dolor, Sit Amet",
          "link": "\/content\/curabitur-sit-amet-arcu-non-orci-porttitor-cursus"
        }
      },
      {
        "node": {
          "title": "Vivamus mollis tortor ligula",
          "body": "Pellentesque ante erat, pretium cursus dolor id, rhoncus sagittis justo. Pellentesque convallis ante fringilla velit iaculis, id condimentum turpis laoreet. Maecenas non nisi et dui mollis malesuada. Proin viverra vel erat vel interdum. Suspendisse condimentum, enim nec porttitor euismod, turpis odio pharetra neque, ac condimentum tellus quam vel sapien. Sed ut vehicula ligula. In nec nunc metus. Donec eget interdum velit.\nCurabitur sit amet arcu non orci porttitor cursus. Curabitur semper erat nisl, nec placerat nunc tincidunt consectetur. Proin a feugiat magna. Ut vel magna at velit tempus ornare tempus malesuada nunc. Duis pellentesque molestie ipsum, id luctus mi lobortis sit amet. Aliquam consectetur purus ultrices tortor porta, et consequat nisi volutpat. Proin nec commodo mauris. Etiam sodales bibendum iaculis. Curabitur at tempor ligula. Aliquam sapien mi, mattis nec aliquam elementum, tempus a orci. Pellentesque erat nisi, tempor non mi et, lobortis gravida nunc. Etiam lectus tellus, porttitor quis congue quis, viverra luctus massa. Donec finibus leo at purus congue, consequat ullamcorper massa aliquam. Phasellus felis odio, aliquet et enim sit amet, eleifend pharetra orci. Vestibulum fermentum ligula neque, et scelerisque purus vulputate in. Curabitur ligula risus, imperdiet vitae justo quis, auctor rhoncus eros.\n",
          "photo": "http:\/\/local.bpdnew.com\/sites\/default\/files\/styles\/blog_-_landing_page_results\/public\/aerial-shot_0.jpg?itok=2R4SE7pI",
          "tags": "Donec, Pineapple, Healthcare",
          "link": "\/content\/vivamus-mollis-tortor-ligula"
        }
      },
      {
        "node": {
          "title": "Nunc aliquet dictum tellus a maximus",
          "body": "Vivamus mollis tortor ligula, eu porttitor nisi tempor sit amet. Integer vitae suscipit quam, sit amet pharetra justo. Integer erat dolor, venenatis a imperdiet in, mattis in dui. Nunc aliquet dictum tellus a maximus. Nam a semper tortor. Phasellus maximus congue vehicula. Nullam purus purus, auctor ac est et, varius fermentum augue.\nPellentesque ante erat, pretium cursus dolor id, rhoncus sagittis justo. Pellentesque convallis ante fringilla velit iaculis, id condimentum turpis laoreet. Maecenas non nisi et dui mollis malesuada. Proin viverra vel erat vel interdum. Suspendisse condimentum, enim nec porttitor euismod, turpis odio pharetra neque, ac condimentum tellus quam vel sapien. Sed ut vehicula ligula. In nec nunc metus. Donec eget interdum velit.\nCurabitur sit amet arcu non orci porttitor cursus. Curabitur semper erat nisl, nec placerat nunc tincidunt consectetur. Proin a feugiat magna. Ut vel magna at velit tempus ornare tempus malesuada nunc. Duis pellentesque molestie ipsum, id luctus mi lobortis sit amet. Aliquam consectetur purus ultrices tortor porta, et consequat nisi volutpat. Proin nec commodo mauris. Etiam sodales bibendum iaculis. Curabitur at tempor ligula. Aliquam sapien mi, mattis nec aliquam elementum, tempus a orci. Pellentesque erat nisi, tempor non mi et, lobortis gravida nunc. Etiam lectus tellus, porttitor quis congue quis, viverra luctus massa. Donec finibus leo at purus congue, consequat ullamcorper massa aliquam. Phasellus felis odio, aliquet et enim sit amet, eleifend pharetra orci. Vestibulum fermentum ligula neque, et scelerisque purus vulputate in. Curabitur ligula risus, imperdiet vitae justo quis, auctor rhoncus eros.\n",
          "photo": "http:\/\/local.bpdnew.com\/sites\/default\/files\/styles\/blog_-_landing_page_results\/public\/imac-transparent-background.png?itok=DSzHmRUx",
          "tags": "Lorem Ipsum, Healthcare",
          "link": "\/content\/nunc-aliquet-dictum-tellus-maximus"
        }
      },
      {
        "node": {
          "title": "Morbi condimentum convallis justo eu ultricies",
          "body": "Vivamus mollis tortor ligula, eu porttitor nisi tempor sit amet. Integer vitae suscipit quam, sit amet pharetra justo. Integer erat dolor, venenatis a imperdiet in, mattis in dui. Nunc aliquet dictum tellus a maximus. Nam a semper tortor. Phasellus maximus congue vehicula. Nullam purus purus, auctor ac est et, varius fermentum augue.\nPellentesque ante erat, pretium cursus dolor id, rhoncus sagittis justo. Pellentesque convallis ante fringilla velit iaculis, id condimentum turpis laoreet. Maecenas non nisi et dui mollis malesuada. Proin viverra vel erat vel interdum. Suspendisse condimentum, enim nec porttitor euismod, turpis odio pharetra neque, ac condimentum tellus quam vel sapien. Sed ut vehicula ligula. In nec nunc metus. Donec eget interdum velit.\nCurabitur sit amet arcu non orci porttitor cursus. Curabitur semper erat nisl, nec placerat nunc tincidunt consectetur. Proin a feugiat magna. Ut vel magna at velit tempus ornare tempus malesuada nunc. Duis pellentesque molestie ipsum, id luctus mi lobortis sit amet. Aliquam consectetur purus ultrices tortor porta, et consequat nisi volutpat. Proin nec commodo mauris. Etiam sodales bibendum iaculis. Curabitur at tempor ligula. Aliquam sapien mi, mattis nec aliquam elementum, tempus a orci. Pellentesque erat nisi, tempor non mi et, lobortis gravida nunc. Etiam lectus tellus, porttitor quis congue quis, viverra luctus massa. Donec finibus leo at purus congue, consequat ullamcorper massa aliquam. Phasellus felis odio, aliquet et enim sit amet, eleifend pharetra orci. Vestibulum fermentum ligula neque, et scelerisque purus vulputate in. Curabitur ligula risus, imperdiet vitae justo quis, auctor rhoncus eros.\nMaecenas iaculis suscipit neque, sed imperdiet urna fringilla eu. Maecenas arcu augue, venenatis nec pharetra quis, consequat sed tortor. Ut mattis posuere vulputate. Aenean in eleifend quam. Quisque ultricies neque sed molestie semper. Ut ullamcorper nisl nisl, non facilisis enim rhoncus sit amet. Morbi condimentum convallis justo eu ultricies. Ut consequat imperdiet congue. Sed bibendum dictum quam. Nulla nulla sem, tempor vel mi id, posuere porta purus. Sed elementum lacinia orci sagittis consectetur. Donec non augue rutrum, blandit est tempus, scelerisque ante. Nulla quis nisl elementum, aliquet metus vel, sodales augue. Integer auctor sed lectus vel tristique.\n",
          "photo": "http:\/\/local.bpdnew.com\/sites\/default\/files\/styles\/blog_-_landing_page_results\/public\/macbook-transparent-background.png?itok=CWIhmUGB",
          "tags": "Holiday, Healthcare, Pickles",
          "link": "\/content\/morbi-condimentum-convallis-justo-eu-ultricies"
        }
      }
    ]

HTML：

<div class="blogPost-wrapper" ng-controller="BlogResultsController">
  <div 
    ng-repeat="post in blogPosts" 
    ng-controller="PathFilterController" 
    ng-hide="isExcludedByFilter"
    ng-class-odd="\'odd\'" 
    ng-class-even="\'even\'" 
    class="blogPost">
    <a href="{{post.node.link}}">
      <div class="photo">
        <img ng-src="{{post.node.photo}}">
        <i class="fa fa-plus-circle"></i>
      </div>
    </a>
    <div class="content">
      <h3 class="title">{{post.node.title}}</h3>
      <div class="tags">{{post.node.tags}}</div>
      <div class="body">{{post.node.body | limitTo : 50}}...</div>
      <div class="link"><a href="{{post.node.link}}">Read More</a></div>
    </div>
    <div ng-hide="blogPosts.length">Nothing here!</div>
  </div>
</div>  

JS：

var app = angular.module('myApp', []);
app.config(function($locationProvider) {
  $locationProvider
    .html5Mode({
      enabled : true,
      requireBase: false
    })
    .hashPrefix('!');
})
app.controller('BlogResultsController', function($scope, $http, $location) {
  $http.get('/admin/blog/json2').success(function(data) {

    $scope.blogPosts = data['nodes'];

  });
});
app.controller('PathFilterController', function($scope, $location) {

  $scope.isExcludedByFilter = applySearchFilter();

  $scope.$watch(
    $location.hash(),
    function( newName, oldName ) {
      if ( newName === oldName ) {
        return;
      }
      applySearchFilter();
    }
  );

  function applySearchFilter() {
    var filter = $location.hash();
    var tags = $scope.post.node.tags;
    var isSubstring = ( tags.indexOf( filter ) !== -1 );

    // If the filter value is not a substring of the
    // tags, we have to exclude it from view.
    $scope.isExcludedByFilter = !isSubstring;
  }
});

如果我用“ console.log（$ scope.isExcludedByFilter）;”来解决问题， 它正确提供了“ true”或“ false”，但如果我深入研究范围，则使用“ console.log（$ scope）;” 它在每个节点对象上显示为“未定义”。

我对棱角还很陌生。

提前致谢。

Answer 1

好的，这里的主要问题是未定义$scope.post ，您必须将post变量传递给applySearchFilter函数，因此ng-hide应该像这样：

ng-hide="isExcludedByFilter(post);"

您的函数应如下所示：

function applySearchFilter(post) {
    var filter = $location.hash();
    var tags = post.node.tags;
    var isSubstring = ( tags.indexOf( filter ) !== -1 );

    // If the filter value is not a substring of the
    // tags, we have to exclude it from view.
    return !isSubstring;
}

因此，您必须传递post变量，使用该变量，然后返回是否应隐藏行。

另外，另一件事，您应该将对函数的引用传递给您的作用域，而不是函数的返回：

$scope.isExcludedByFilter = applySearchFilter;

传递applySearchFilter(); 会传递函数的返回值，该函数以前是undefined ，但是您想传递引用，因此可以从HTML调用它。