0
我试图显示一个简单的博客帖子结果列表，通过URL哈希值过滤。AngularJS - 用自定义隐藏功能ng-repeat
我用这个作为参考： 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）;”它在每个节点对象上显示为“未定义”。
我还是很新的角度。
在此先感谢。