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調用它。