【问题标题】:AngularJS - Three dependent selects - only the first two populateAngularJS - 三个依赖选择 - 只有前两个填充
【发布时间】:2014-05-20 12:00:53
【问题描述】:

我正在使用 Express、Angular 和 Jade。应用程序的相关部分允许用户从他们的 Trello 帐户中选择组织、董事会和列表。这三个项目形成一个层次结构:组织包含板,板包含列表。

所以在我的翡翠部分中,我有以下内容:

select(ng-model='userData.apps.trello.organization', ng-options='orgId as orgDetails.name for (orgId, orgDetails) in orgsandboards')
select(ng-model='userData.apps.trello.board', ng-options='boardId as boardDetails.name for (boardId, boardDetails) in orgsandboards[userData.apps.trello.organization]["boards"]')
select(ng-model='userData.apps.trello.list', ng-options='listId as listDetails.name for (listId, listDetails) in orgsandboards[userData.apps.trello.organization][userData.apps.trello.board]["lists"]')

顺便说一句,上面的语法来自this helpful answer

无论如何,数据结构 - 以上面的答案为模型 - 看起来像这样:

orgsandboards: {
    orgid1: {
        name: "organization 1",
        boards: {
            boardid1: {
                name: "name of the first board",
                lists: {
                    listid1: {
                        name: "name of list 1"
                    },
                    listid2: {
                        name: "name of list 2"
                    }
                }
            },
            boardid2: {
                name: "name of the second board",
                lists: {
                    listid3: {
                        name: "name of list 3"
                    },
                    listid4: {
                        name: "name of list 4"
                    }
                }                
            }
        }
    },
    orgid2: {.. and so on ..}
}

前两个选择效果很好。如果我改变组织,潜在董事会的名单也会改变。但是,第三个选择 - 列表 - 从不更新。我已验证数据存在且可用。

我查看了其他问题和答案,包括 thisthis。就像这里经常发生的那样,似乎没有人能提供我所寻求的答案。

谢谢。

【问题讨论】:

    标签: javascript node.js angularjs pug trello


    【解决方案1】:

    看起来像是 Angular 的宽容天性掩盖错误的一个例子。第三个列表的ng-options需要以:

    结尾
    in orgsandboards[userData.apps.trello.organization]["boards"][userData.apps.trello.board]["lists"]
    

    注意["boards"] 部分。

    按照您目前的方式,您在 orgsandboards[userData.apps.trello.organization] 中引用了一个不存在的键,但 Angular 在这种情况下通常不会抛出错误——它只是默默地失败。

    【讨论】:

    • 我知道这很简单。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-09
    • 1970-01-01
    • 2016-08-20
    相关资源
    最近更新 更多