Javascript AngularJS：使用ng selected根据集合选择多个选项

我有两个对象数组，一个数组是另一个的子集：

$scope.taskGroups = [
  {id: 1, name: 'group1', description: 'description1'},
  {id: 2, name: 'group2', description: 'description2'},
  {id: 3, name: 'group3', description: 'description3'}
];

$scope.selectedGroups = [
  {id: 1, name: 'group1', description: 'description1'},
  {id: 2, name: 'group3', description: 'description3'}
];

在尝试使用

ng option

解决问题失败后，我想我也许可以创建一个函数，根据我在文档中找到的内容，确定是否应该在

select

列表中选择一个选项：

ngSelected -如果ngSelected中的表达式为truthy，则模块ng中的指令将在元素上设置选定属性

所以，我提出了这个函数：

$scope.inSelectedGroups = function(taskGroup) {
  angular.forEach($scope.selectedGroups, function(group) {
    if (taskGroup.id == group.id) {
      return true;
    }
    return false;
  });
};

并尝试在此html中使用它：

<select multiple ng-model="selectedGroups" style="width: 100%" size="7">
    <option ng-repeat="taskGroup in taskGroups" value="{{taskGroup.id}}" ng-selected="inSelectedGroups(taskGroup)">{{taskGroup.name}}</option>
</select>

{{taskGroup.name}

但是，没有骰子-显示了

任务组的完整列表

，但是

选择的任务组

没有被选中

---

我在这里选错树了吗？

仔细看，您正在从

angular.forEach

参数中定义的函数返回布尔值，因此从

inSelectedGroups

函数不返回任何内容

尝试将函数修改为：

$scope.inSelectedGroups = function(taskGroup) {
  var flag = false;
  angular.forEach($scope.selectedGroups, function(group) {
    if (taskGroup.id == group.id) {
      flag = true;
      return;
    }
    flag = false;
    return;
  });
  return flag;
};

任务组的完整列表显示，但所选任务组不显示， 嗯，被选中了

我尝试了使用

ngSelected

属性的解决方案，但也没有成功，因此我尝试使用

ngOptions

来替代它，效果很好

angular.module（'app'，[]）.controller（'TestController'，['$scope'，
职能（$范围）{
$scope.taskGroups=[{
id:1，
名称：'group1'，
描述：“描述1”
}, {
id:2，
名称：'group2'，
描述：“描述2”
}, {
id:3，
名称：'group3'，
描述：“描述3”
}];
$scope.selectedGroups=[{
id:1，
名称：'group1'，
描述：“描述1”
}, {
id:2，
名称：'group3'，
描述：“描述3”
}];
}
])

要在何处显示任务组？在下一个选择框或纯文本中，它将全部位于同一个选择框中。基本情况是，我有一个可以属于多个任务组的任务。编辑任务时，我希望显示一个包含所有任务组的选择列表，并选择当前关联的组。这意味着当您从任务组中选择任务时，该选择框将在同一个选择框中显示所有选定的组。那么，另一项任务将列在哪里？该“任务”与“任务组”是分开的。我可能有三个任务组——“每日”、“上午”和“内部”。然后，我可能会有一个属于上午和内部小组的任务。我希望选择列表显示所有三个组，但只选择了“上午”和“内部”。这似乎不起作用。我获得了任务组的完整列表，但未选择任何任务组。此外，我还以为返回true会中断函数，而不仅仅是forEach块。不是这样吗？谢谢alex_andrea，这成功了！事实证明，我与我的“ng选项”尝试非常接近；我在子句中的

中使用了错误的表。（不调用指令
ng选项
可能也会有所帮助……）这是有道理的，我今天肯定学到了一些东西+1:）这确实有效，因为正确的任务组显示为选中，并正确地标记为答案。我看到的唯一的另一个问题是，如果我试图更改任务的任务组，选择似乎被破坏了-无法再删除组或添加其他组。有什么想法吗？我正在用
$watch
。。。再次感谢！：）@特雷弗特尼你能给我一把小提琴吗？谢谢。@alex andrea-这是答案。我基本上是从您提供的代码片段开始的，它显示了行为本身。运行时，“选择”将显示所有组，并选择适当的组，选定的组显示在“选择”框下方。如果尝试选择一个或多个组，则选择将消失，并且您会在框下方看到所选组的键，尽管没有选项显示为选中。对不起，如果小提琴看起来很怪；这是我第一次摆弄小提琴……：）@我现在明白了。谢谢我意识到分配给选项的当前值是
任务组的
id
，这是错误的，因为它应该是选中的
任务组
对象。要解决此问题，只需将ng选项更改为此
ng options=“taskGroup as taskGroup.description for taskGroup in taskGroup track by taskGroup.id”