我有一个AngularJS应用程序正在搜索服务列表,然后使用ngRepeat在搜索栏下方显示结果。正在显示正确数量的搜索结果,但绑定没有任何内容,使锚标记为空。
以下是生成的标记:
<h4 class="media-heading result-heading"><a href="#"></a></h4>
<p class="result-abstract"></p>
<p></p>
<p></p>
<div class="row">
<div class="col-all-12 result-contact">
<div class="">
<span class="icon-office"></span> <a href="#"></a>
</div>
<div class="">
<span class="icon-phone"></span> <a href="#"></a>
</div>
</div>
</div>
我在本地机器上运行完全相同的代码,它按预期工作,并且AngularJS的版本是相同的,所以我不知道发生了什么。以前有没有人经历过这个,嘿嘿解决了吗?
不会抛出任何错误,通过AJAX从json文件中检索数据。 这是包含ngRepeats的模板:
<div class="media-body search-result" ng-repeat="service in services | filter: query | filterTags: allTags | orderBy: serviceOrder:direction | hasValue | startFrom:(currentPage - 1) * servicesPerPage | limitTo:servicesPerPage">
<h4 class="media-heading result-heading"><a href="#">{{service.serviceName}}</a></h4>
<p class="result-abstract">{{service.abstract}}</p>
</p>
</p>
<div class="row">
<div class="col-all-12 result-contact">
<div class="">
<span class="icon-office"></span> <a href="#">{{service.office}}</a>
</div>
<div class="">
<span class="icon-phone"></span> <a href="#">{{service.contact}}</a>
</div>
</div>
</div>
</div>
这背后的代码并不是那么重要,因为它是从一个页面到另一个页面的所有内容的精确副本,并且它适用于上一页。除了使用空格填充新页面上的标记这一事实外,HTML,CSS或Javascript没有区别。 我已经检查过以确保正确拉入json数据,并且AngularJS的版本是相同的(版本是1.2.21)。
以下是自定义过滤器:
serviceSearchbar.filter('startFrom', function () {
return function (input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
serviceSearchbar.filter('hasValue', function() {
return function (input) {
if (angular.element('#servicesQuery').val()) {
return input;
}
return [];
}
});
serviceSearchbar.filter("isSelected", function () {
return function (input) {
var response = {};
if (input !== undefined) {
Object.keys(input).forEach(function (tag) {
if (input[tag] !== false) {
response[tag] = true;
}
});
}
return response;
}
});
serviceSearchbar.filter("filterTags", ["$filter", function ($filter) {
return function (input, tags) {
var selectedTags = [],
response = input,
found = false,
numSelectedTags;
if (input === undefined) {
return input;
}
if (tags !== undefined) {
Object.keys(tags).forEach(function (tag) {
if (tags[tag] !== false) {
selectedTags.push(tag);
}
});
}
if (selectedTags.length > 0) {
response = $filter("filter")(response, function(value) {
var found = false;
selectedTags.forEach(function(tag) {
if (value.tags.indexOf(tag) !== -1) {
found = true;
return true;
}
});
return found;
});
}
return response;
}
}]);
以下是正在使用的数据示例:
{
"services": [
{
"serviceName": "Department of Art",
"sponsor": "Department of Art",
"shortName": "art-dep",
"url": "http://www.byui.edu/art/",
"contactName": "Contact Name",
"office": "Spori some room",
"contact": "(123) 456-7890",
"mapUrl": "http://www.byui.edu/maps#SPO",
"tags": [
"art",
"design",
"art department",
"art program"
],
"abstract": "The BYU-Idaho Department of Art provides an aesthetic, conceptual, and technical foundation in the visual arts for students who possess a wide range of interests, experiences, and abilities."
},
{
"serviceName": "College of Performing and Visual Arts",
"sponsor": "College of Performing and Visual Arts",
"shortName": "performing-visual-arts",
"url": "http://www.byui.edu/performing-visual-arts",
"contactName": "Contact Name",
"office": "Spori some room",
"contact": "(123) 456-7890",
"mapUrl": "http://www.byui.edu/maps#SPO",
"tags": [
"art",
"dance",
"music",
"spori",
"theater"
],
"abstract": "The College of Performing and Visual Arts provide an important means of communication where thoughts, creativity, and expression can be directed to ennoble, uplift, inspire..."
},
{
"serviceName": "Spori Art Gallery",
"sponsor": "Department of Art",
"shortName": "spo-gal",
"url": "http://www.byui.edu/spori-gallery/",
"contactName": "Contact Name",
"office": "Spori some room",
"contact": "(123) 456-7890",
"mapUrl": "http://www.byui.edu/maps#SPO",
"tags": [
"art",
"gallery",
"spori"
],
"abstract": "Jacob Spori Art Gallery will show works of current BYU-Idaho Visual Arts students, selected by the art department faculty."
}
]
}