AngularJS - ng-repeat with custom ng-hide function

Question

I'm trying to display a simple list of blog post results filtered by URL hash values.

I'm using this as a reference: 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;
  }
});

If I console out with "console.log($scope.isExcludedByFilter);" it provides "true" or "false" correctly but if I dive into the scope, with "console.log($scope);" it shows as "undefined" on each of the node objects.

I'm still very new to angular.

Thanks in advance.

Answer 1

Ok, the main problem here is that $scope.post is not defined, you will have to pass the post variable to your applySearchFilter function, so you ng-hide should be like so:

ng-hide="isExcludedByFilter(post);"

And your function should look like this:

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;
}

So you have to pass the post variable, use that one, and then return whether or not it should hide the row.

Also, another thing, you should pass the reference to the function to your scope and not the return of the function:

$scope.isExcludedByFilter = applySearchFilter;

Passing applySearchFilter(); would pass the return of the function, which was undefined before, but you want to pass the reference, so you can call it from your HTML.