Question

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

$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 - 模块中的指令ng如果ngSelected中的表达式是真实的，则在元素上设置所选属性。

所以，我提出了这个功能：

$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>

但是，没有骰子 - taskGroups的完整列表显示，但selectedTaskGroups未被选中......

我在这里咆哮错误的树吗？

Answer 1

显示完整的taskGroups列表，但是selectedTaskGroups不是，好吧，选中。

我尝试了使用ngSelected属性的解决方案，但我也没有成功，所以我尝试使用ngOptions代替它并且它有效。

angular.module('app', []).controller('TestController', ['$scope',
  function($scope) {
    $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'
    }];


  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestController">
  <select multiple="true" ng-model="selectedGroups" style="width: 100%" ng-options="taskGroup.id as taskGroup.description for taskGroup in taskGroups track by taskGroup.id" size="7">
  </select>
</div>

Answer 2

请仔细查看，您正在从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;
};

AngularJS：使用ng-selected根据集合

2 个答案: