HTML

Question

我有一个带有一些选项的角度下拉列表。假设我们有一个带有

的下拉列表

[列表]
一个
乙
ç
d
Ë
˚F

如果您选择A，您将看到另一个下拉列表：
[名单]
A-1
A-2
A-3
A-4

用B

[名单]
B-1
B-2

因此第二个列表取决于您在第一个列表中选择的内容。到目前为止，我得到了这个。

HTML

<div class="" ng-show="signIn">
    <select ng-model="myProject" ng-options="proj.title for proj in projects | unique:'title'"><option value="">-- choose project --</option></select>
    <select ng-options="myProject.name"></select>
</div>

问题是我无法在第一个列表中使用绑定变量。实现此目的的最佳方法是什么。

Answer 1

这实际上取决于您的数据结构以及检索方式。我已经模拟了一个使用这样的嵌套结构的例子：

$scope.list = [
    {
        name:'A',
        items: [
            'A-1',
            'A-2',
            'A-3',
            'A-4'
        ]
    }, {
        name: 'B',
        items: [
            'B-1',
            'B-2'
        ]
    }, {
        name: 'C'
    }
];

以下是实例：http://jsfiddle.net/hRz8G/

看看你是否可以使用它，也许你需要调整你的数据结构。如果这是不可能的，请发布您的数据结构，我们也许能够找到解决方案。

更新

试试这个例子，看看它是否符合您的需求：http://jsfiddle.net/hRz8G/3/

它遍历项目列表，并将项目内的所有任务嵌入到任务数组中。

[{
  "projectId":1,
  "title":"someTitle",
  "user":"mike",
  "tasks":[
    {"taskId":1,"name":"Sales"},
    {"taskId":3,"name":"Support"}
  ]
},
...
]

我希望这是你正在寻找的解决方案。

定义了一个过滤器，可以保持整洁。不幸的是，它与项目对象结构紧密相关。如果id字段名称（'projectId'）发生变化，您也需要更改过滤器，但这是一个我正在努力解决的问题。

Answer 2

所以我得到了答案。我以为我知道答案，但我没有......我做的一切都一样，而且这次工作= S ..还要感谢你，小提琴我创建了我的下拉列表。我使用＆＃39; myProject.title＆＃39;过滤了项目。但它没有用。所以我输出了＆＃39; myProject＆＃39;它给了我这个信息。

{＆＃34;专案编号＆＃34;：＆＃34; 1056＆＃34;＆＃34;标题＆＃34;：＆＃34; someTitle＆＃34;＆＃34;使用者＆＃34;：＆＃34;麦克风＆＃34;＆＃34;的TaskID＆＃34;：＆＃34; 3＆＃34;＆＃34;名称＆＃34;：＆＃34;设计＆＃34;}

所以当我得到这个时我想我用整个json文件过滤了它。（这不是真的......）但后来我将我的选择输入更改为ng-change并调用了一个函数 - ＆gt; selectedProject（myProject的）。在该功能中，我获得了项目的标题，然后我将其退回。在我的第二个下拉列表中，我将其更改为＆＃39; filter：selectedProject＆＃39;它突然起作用了......我就像是吗？所以我认为如果我们只使用第一个输入过滤下拉列表会更快。所以我用myProject.title过滤了它，它也有效..所以我仍然不知道答案，但现在这是我的代码。控制器代码只是一些$ http.post函数

HTML文件

<div class='timesheet' ng-controller="timesheetController">

    <div class="" ng-show="signIn">
        <select ng-model="title" ng-options="proj.title for proj in projects | unique:'title'"><option value="">-- choose project --</option></select>
        <select ng-model="taskId" ng-options="proj.name for proj in projects | filter:title.title"></select>
            {{title.title}}{{taskId.name}}
    </div>
</div>

如何在Angular中设置级联下拉列表？

HTML

2 个答案:

更新

HTML文件