Javascript 默认情况下，ngOptions选择了所有选项，并在“选择”按钮上选择了消失选项

我有一个奇怪的问题，我似乎无法解决我的观点。我正在使用一个指令生成我网站的树状视图。当我选择一个站点时，我有两个选择框，其中填充了一个站点中的组和站点中的列表。填充选项时，所有选项都处于选中状态。我已经检查了元素，它们都有

option=“selected”

奇怪的是，当我单击单个选项时，所有其他选项都消失了，只剩下选中的选项。我已经在Chrome控制台中检查了源代码，是的，只剩下选中的选项标签

对于exmaple，站点列表选择框有多个选项，但当我单击旧文档时，它们都消失了。在站点组中，已选择所有组 Ctrl:

视图：

    <div class="siteGroups">
        <label for="siteGroups">Site Groups</label>
        <select 
            multiple
            name="siteGroups" 
            id="siteGroups" 
            class="siteGroups"
            ng-model="siteGroups"
            ng-options="g.name for g in siteGroups">
        </select>
    </div>
        <div class="btm1 animated fadeInUp">
        <label for="siteLists">Site Lists </label>
        <select multiple
            id="siteLists" 
            ng-model="siteLists"
            ng-options="l.title for l in siteLists">
        </select>
    </div>

网站群
网站列表

---

之所以发生这种情况，是因为选择列表中的

ngOptions

与

ngModel

绑定到同一数组中

ngModel

需要是一个仅保存选定值的不同数组

以

siteGroups

为例，所发生的事情是，选择列表选项用

siteGroups

初始化，并且它们都被选中，因为项目位于

ngModel

中（也是

siteGroups

数组）。当您单击其中一个时，它现在会从

ngModel

中删除除您单击的项目之外的所有其他项目。由于

ngOptions

绑定到同一个列表，因此所有未选择的选项也将消失

---

要解决此问题，请为每个列表中的选定值在您的作用域上创建单独的数组属性。

是的，您是对的。我改变了NGM模型，它工作得很好。

    <div class="siteGroups">
        <label for="siteGroups">Site Groups</label>
        <select 
            multiple
            name="siteGroups" 
            id="siteGroups" 
            class="siteGroups"
            ng-model="siteGroups"
            ng-options="g.name for g in siteGroups">
        </select>
    </div>
        <div class="btm1 animated fadeInUp">
        <label for="siteLists">Site Lists </label>
        <select multiple
            id="siteLists" 
            ng-model="siteLists"
            ng-options="l.title for l in siteLists">
        </select>
    </div>