当前位置: 首页 > 面试题库 >

angularjs过滤器(不起作用)

东云
2023-03-14
问题内容

以下HTML,Javascript和JSON可以正确呈现,但该过滤器根本不起作用。我们做错了什么?

<div data-ng-controller="dashboard_controller">
    <h1>
        Catalogs
        <input type="text" data-ng-model="catalog_filter" placeholder="Filter Distributors">
    </h1>

    <div class="catalogs_listing">
        <ul data-ng-repeat="catalog in catalogs | filter:catalog_filter">
            <li><a href="{{catalog.distributor_id}}/d/products/catalog_view/{{catalog.uid}}">
                <div class="catalog_thumb">
                    <div class="catalog_thumb_image">
                        <img src="{{catalog.thumb_image}}" />
                    </div>
                </div>
                <div class="catalog_info">
                    <h2>{{distributors[catalog.distributor_id].name}}
                        <span>{{catalog.products_count}}p</span>
                    </h2>
                    <p>{{catalog.name}}</p>
                </div>
                </a>
            </li>
        </ul>
    </div>
</div>

Javascript:

app.controller('dashboard_controller', function ($scope, $http) {
    $http.get('./api/distributors/my').then(function (res) {
        $scope.distributors = res.data;
    });
    $http.get('./api/dashboard/catalogs').then(function (res) {
        $scope.catalogs = res.data;
    });
});

这两个JSON:

api / distributors / my:

{
    "data": {
        "9kkE1sL8vXSZMVaL": {
            "created": "1346840145.22",
            "uid": "9kkE1sL8vXSZMVaL",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "Nikee",
            "description": "Just do it",
            "image_file": "LogoNike.jpg",
            "modified": "1368443518.3894",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": "gbp"
        },
        "1OBKUhpb8srwHVVb": {
            "created": "1346840213.41",
            "uid": "1OBKUhpb8srwHVVb",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "Zappos",
            "description": "The webs most popular shoe store",
            "image_file": "zappos.jpg",
            "modified": "1347006513.93",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": null
        },
        "qHPXDp5lSQuz9z3Q": {
            "created": "1346840305.78",
            "uid": "qHPXDp5lSQuz9z3Q",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "Kitchenaid",
            "description": "For the way it's made",
            "image_file": "kitchenaid_logo.gif",
            "modified": "1346840305.78",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": null
        },
        "9K4G8gE1sh4qpVG2": {
            "created": "1346840443.32",
            "uid": "9K4G8gE1sh4qpVG2",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "Unilever",
            "description": "Create a better future",
            "image_file": "Unilever-logo.jpg",
            "modified": "1346842125.2",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": null
        },
        "55ORaD7h0EMcaX82": {
            "created": "1346840529.93",
            "uid": "55ORaD7h0EMcaX82",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "Dell",
            "description": "The power to do more",
            "image_file": "dell-logo.jpg",
            "modified": "1346840529.93",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": null
        },
        "2LHf5ZipYjA2PdXu": {
            "created": "1352084334.37",
            "uid": "2LHf5ZipYjA2PdXu",
            "created_by": "3MO4JyiB9rMWTfBu",
            "name": "Online Retailer",
            "description": "Online Retailer",
            "image_file": "Home and Giftware.gif",
            "modified": "1352954806.28",
            "modified_by": "cu3OraVD7WclpLrX",
            "currency": null
        },
        "MdTDL72ynFySuUCR": {
            "created": "1352870158.83",
            "uid": "MdTDL72ynFySuUCR",
            "created_by": "1JiAF71w5VPHGgJe",
            "name": "Uniuniform",
            "description": "Uniform Suppliers",
            "image_file": "CWLogo.png",
            "modified": "1358317144.85",
            "modified_by": "sv3HuiiRbiuHWkul",
            "currency": null
        },
        "oyYmdDcod9fseZng": {
            "created": "1352934703.42",
            "uid": "oyYmdDcod9fseZng",
            "created_by": "cu3OraVD7WclpLrX",
            "name": "Heidy Pharmaceuticals",
            "description": "Pharmaceutical Solutions",
            "image_file": "heidy.jpg",
            "modified": "1352934703.43",
            "modified_by": "cu3OraVD7WclpLrX",
            "currency": null
        },
        "Kfs4HdFUfz6j2l2I": {
            "created": "1352953682.22",
            "uid": "Kfs4HdFUfz6j2l2I",
            "created_by": "cu3OraVD7WclpLrX",
            "name": "xxx",
            "description": "Online Retailer",
            "image_file": "xxx.gif",
            "modified": "1352953828.34",
            "modified_by": "cu3OraVD7WclpLrX",
            "currency": null
        },
        "g2qRqUWvPSLRvLQr": {
            "created": "1352953924.68",
            "uid": "g2qRqUWvPSLRvLQr",
            "created_by": "cu3OraVD7WclpLrX",
            "name": "ddd",
            "description": "Natural Product Retailer",
            "image_file": "yes-to.jpg",
            "modified": "1352953924.68",
            "modified_by": "cu3OraVD7WclpLrX",
            "currency": null
        },
        "bbSu3jpFhdkG3TJR": {
            "created": "1352954016.22",
            "uid": "bbSu3jpFhdkG3TJR",
            "created_by": "cu3OraVD7WclpLrX",
            "name": "llll",
            "description": "Artificial Product Retailer",
            "image_file": "l.jpg",
            "modified": "1352954016.23",
            "modified_by": "cu3OraVD7WclpLrX",
            "currency": null
        },
        "X9xWF9VrRDqGWZ6S": {
            "created": "1352954722.97",
            "uid": "X9xWF9VrRDqGWZ6S",
            "created_by": "cu3OraVD7WclpLrX",
            "name": "zzz",
            "description": "Toy Manufacturer",
            "image_file": "zzz.jpg",
            "modified": "1352954722.97",
            "modified_by": "cu3OraVD7WclpLrX",
            "currency": null
        },
        "02CCPuWtM6ZJVgiQ": {
            "created": "1367741881.7113",
            "uid": "02CCPuWtM6ZJVgiQ",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "test brand",
            "description": "xxxx",
            "image_file": null,
            "modified": "1367741882.5129",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": null
        },
        "GjsdgMCzp1n379j0": {
            "created": "1369136484.1802",
            "uid": "GjsdgMCzp1n379j0",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "testing all products",
            "description": "just a test",
            "image_file": null,
            "modified": "1369136484.5298",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": "usd"
        },
        "spVsxtJVroMkXQ1N": {
            "created": "1370508658.353",
            "uid": "spVsxtJVroMkXQ1N",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "pppp Import",
            "description": "",
            "image_file": null,
            "modified": "1370508658.4394",
            "modified_by": "3W7AoIQHTtvPauaK",
            "currency": "usd"
        }
    }

api /仪表板/目录

{
    "data": {
        "UPf17vFhMhiM2yYl": {
            "created": "1352960014.4",
            "uid": "UPf17vFhMhiM2yYl",
            "created_by": "3MO4JyiB9rMWTfBu",
            "name": "All Products",
            "description": "This catalog contains all of your products",
            "modified": "1352960014.4",
            "modified_by": "3MO4JyiB9rMWTfBu",
            "distributor_id": "9kkE1sL8vXSZMVaL",
            "image": null,
            "start": null,
            "end": null,
            "is_archived": null,
            "products_count": "0",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "ZUfcKpz0VrJZZZvW": {
            "created": "1354172792.79",
            "uid": "ZUfcKpz0VrJZZZvW",
            "created_by": "ORIGWlEFxbuE945J",
            "name": "test catalog",
            "description": "",
            "modified": "1354172792.79",
            "modified_by": "ORIGWlEFxbuE945J",
            "distributor_id": "9kkE1sL8vXSZMVaL",
            "image": null,
            "start": null,
            "end": null,
            "is_archived": null,
            "products_count": "0",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "6YoSSDCzLH8gEokf": {
            "created": "1360706477.5283",
            "uid": "6YoSSDCzLH8gEokf",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "xxxx",
            "description": "",
            "modified": "1360706477.5312",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "9kkE1sL8vXSZMVaL",
            "image": null,
            "start": null,
            "end": null,
            "is_archived": null,
            "products_count": "3",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "4AwqE7iTNQmjSBED": {
            "created": "1360794567.8451",
            "uid": "4AwqE7iTNQmjSBED",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "All Products",
            "description": null,
            "modified": "1360794567.8454",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "4AwqE7iTNQmjSBED",
            "image": null,
            "start": null,
            "end": null,
            "is_archived": null,
            "products_count": "1",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "02CCPuWtM6ZJVgiQ": {
            "created": "1367741881.7916",
            "uid": "02CCPuWtM6ZJVgiQ",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "All Products",
            "description": null,
            "modified": "1367741881.7919",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "02CCPuWtM6ZJVgiQ",
            "image": null,
            "start": null,
            "end": null,
            "is_archived": null,
            "products_count": "2095",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "9kkE1sL8vXSZMVaL": {
            "created": "1368165852.0352",
            "uid": "9kkE1sL8vXSZMVaL",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "All Products",
            "description": null,
            "modified": "1368165852.0361",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "9kkE1sL8vXSZMVaL",
            "image": null,
            "start": null,
            "end": null,
            "is_archived": null,
            "products_count": "26",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "ZmSiqOK2C2Sq3MWB": {
            "created": "1368958571.9548",
            "uid": "ZmSiqOK2C2Sq3MWB",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "Test Catalog",
            "description": "",
            "modified": "1368958571.9581",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "02CCPuWtM6ZJVgiQ",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "1",
            "products_count": "0",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "flzoMbizDDTDpjgc": {
            "created": "1368958778.8623",
            "uid": "flzoMbizDDTDpjgc",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "xzczxc",
            "description": "",
            "modified": "1368958778.8637",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "02CCPuWtM6ZJVgiQ",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "0",
            "products_count": "29",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "KfRJHxp7jBnBGCJ5": {
            "created": "1369219487.4418",
            "uid": "KfRJHxp7jBnBGCJ5",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "hhh",
            "description": "",
            "modified": "1369219487.4433",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "9kkE1sL8vXSZMVaL",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "0",
            "products_count": "7",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "spVsxtJVroMkXQ1N": {
            "created": "1370508658.3567",
            "uid": "spVsxtJVroMkXQ1N",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "All Products",
            "description": null,
            "modified": "1370508658.3575",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "spVsxtJVroMkXQ1N",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "0",
            "products_count": "343",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "1OBKUhpb8srwHVVb": {
            "created": "1370857435.5606",
            "uid": "1OBKUhpb8srwHVVb",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "All Products",
            "description": null,
            "modified": "1370857435.5612",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "1OBKUhpb8srwHVVb",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "0",
            "products_count": "4",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "wXMHFdPyiXFBuRjJ": {
            "created": "1370864864.1247",
            "uid": "wXMHFdPyiXFBuRjJ",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "x",
            "description": "",
            "modified": "1370864864.1278",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "spVsxtJVroMkXQ1N",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "0",
            "products_count": "10",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "GjsdgMCzp1n379j0": {
            "created": "1371116610.6898",
            "uid": "GjsdgMCzp1n379j0",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "All Products",
            "description": null,
            "modified": "1371116610.6902",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "GjsdgMCzp1n379j0",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "0",
            "products_count": "2095",
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        },
        "gvWLNWwsI3B7mnCU": {
            "created": "1371116669.5872",
            "uid": "gvWLNWwsI3B7mnCU",
            "created_by": "3W7AoIQHTtvPauaK",
            "name": "All Products",
            "description": null,
            "modified": "1371116669.5877",
            "modified_by": "3W7AoIQHTtvPauaK",
            "distributor_id": "gvWLNWwsI3B7mnCU",
            "image": null,
            "start": "0",
            "end": "0",
            "is_archived": "0",
            "products_count": 0,
            "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg"
        }
    }

问题答案:

角度过滤器无法将对象的对象作为输入。ng-
repeat可以渲染它们,但是过滤器需要一个对象数组。解决此问题的最简单方法是让服务器返回没​​有命名键的数组。您还可以在每次请求后将响应转换为角度(更昂贵)。



 类似资料:
  • 所以,基本上,前端使用reactJS,后端Spring Boot(微服务,zuul充当网关),当然,如果没有CORS的东西,他们什么也做不了。 我们使用了这段代码 它起作用了,但不再起作用了。我正在使用Postman检查发送回来的标头,但这些都不在那里。 我该怎么办?我可以在每个微服务中使用一个简单的CORS过滤器,但让Zuul处理这一切会容易得多。因为无论如何所有请求都会通过它。 有什么建议吗?

  • 主要内容:AngularJS 过滤器,表达式中添加过滤器,AngularJS 实例,AngularJS 实例,currency 过滤器,AngularJS 实例,向指令添加过滤器,AngularJS 实例,过滤输入,AngularJS 实例,自定义过滤器,AngularJS 实例过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集

  • 问题内容: 尝试滤除具有非null的特定属性的项目 我只想显示一个李;一个给萨莉。这是我没有成功的尝试 您知道如何在不创建自定义过滤器的情况下执行此操作吗?甚至如此,自定义过滤器会是什么样? 问题答案: 根据https://github.com/angular/angular.js/issues/11573(对于Angular> = 1.4),建议使用’‘,它匹配除null / undefined

  • 问题内容: 我正在尝试通过轮胎/elasticsearch实现“类似作用域”的功能。为什么即使我有状态为“ Test1”或“ Test2”的条目也不能正常工作?结果始终为空。 该方法在没有过滤器的情况下工作良好。过滤器方法有问题吗?我已经检查了轮胎doku。 谢谢!:) 问题答案: 您的问题很可能是由于对该字段使用默认映射而引起的,该映射会将其标记化-小写,拆分为单词等。 比较这两个: 您的解决方

  • 这是回应的一部分 我有联系人号码和名字 现在我的第二个查询->我正在使用术语筛选器查询上面的联系电话

  • https://www.googleapis.com/calendar/v3/calendars/email/events?key=key&timemin=2021-07-15t00:00.000z&timemax=2021-07-17t00:00.000z&timezone=asia/calcutta 提前感谢!