AngularJS ngRepeat用什么都不替换绑定

时间:2015-02-11 15:57:49

标签: javascript angularjs angularjs-ng-repeat

我有一个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."
        }
    ]
}

0 个答案:

没有答案